Sal*_*ale 7 forms dynamic tabindex
我一直在研究一些更复杂的表单,其中显示字段取决于表单中输入的值的某些条件.
但是,当通过<Tab>键输入表单(<Tab>键 - >输入值 - > <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()"因为在它不是紧接的下一个元素的情况下也使用相同的代码.有什么方法可以解决这个问题吗？
提前感谢任何意见/建议.
我用按键来完成这项工作。
在示例中，您可以通过文本字段 1、3 和 5 向前和向后按 Tab 键，然后更改显示文本字段 2 的文本字段 1 的值；然后，您可以按 Tab 键切换到文本字段 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>