我一直在研究一些更复杂的表单,其中显示字段取决于表单中输入的值的某些条件.
但是,当通过< Tab>输入表单时键(< Tab> key->输入value->< Tab>键),它不会转到新出现的字段,而是转到之前可见的字段.
以下是简化示例.如果您使用数字1向字段写入任何内容,则会触发更改事件并显示值为2的输入,但不会显示下一个要关注的输入.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<form>
<input id="input1" value="1" tabindex="1" onchange="$('#input2').show()">
<input id="input2" value="2" tabindex="2" style="display: none;">
<input id="input3" value="3" tabindex="3" onchange="$('#input4').show()">
<input id="input4" value="4" tabindex="4" style="display: none;">
<input id="input5" value="5" tabindex="5">
<input id="input6" value="6" tabindex="6">
</form>
由于其复杂性,我不想直接控制< Tab>键.
此外,我不能使用onchange =“$(‘#input2’).show(); $(‘#input2’).focus()”因为当它不是一个紧接的下一个元素时也会使用相同的代码.
有什么方法可以解决这个问题吗？
提前感谢任何意见/建议.
解决方法
click here for a working solution on jsFiddle.
我使用按键来完成这项工作.
在示例中,您可以前进和后退文本字段1,3和5,然后更改textfield 1的值,显示textfield 2;然后你可以选择文本字段2,3和5 – 依此类推.
我希望我能正确理解你的挑战,这很有帮助.干杯.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input").live("keypress",function() {
$(this).next().show()
})
})
</script>
<style type="text/css">
.hidden {
display:none;
}
</style>
</head>
<body>
<form>
<input id="input1" value="1">
<input id="input2" value="2" class="hidden">
<input id="input3" value="3">
<input id="input4" value="4" class="hidden">
<input id="input5" value="5">
<input id="input6" value="6" class="hidden">
</form>
</body>
</html>
