7

我一直在研究一些更复杂的表单，其中字段的显示取决于表单中输入的值的某些条件。

但是，当通过<Tab>键（<Tab>键->输入值-><Tab>键）输入表单时，它不会转到新出现的字段，而是转到以前可见的字段。

以下是简化的示例。如果您向编号为 1 的字段写入任何内容，则会触发 on change 事件并显示值为 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()"因为在它不是直接下一个元素的情况下也会使用相同的代码。有没有办法解决这个问题？

提前感谢您的任何评论/建议。

4

1 回答 1

0

单击此处获取有关 jsFiddle 的有效解决方案。

我用按键来完成这项工作。

在示例中，您可以在文本字段 1、3 和 5 中前后切换，然后更改显示文本字段 2 的文本字段 1 的值；然后，您可以使用选项卡转到文本字段 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>
于 2012-10-12T12:19:04.457 回答