动态表单中的 TabIndex（元素根据情况出现）问题

发布于 2024-12-29 03:58:30 字数 1073 浏览 0 评论 0原文

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

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

以下是简化的示例。如果您向编号为 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>

由于其复杂性，我不想直接控制键。此外，我无法使用 onchange="$('#input2').show();$('#input2').focus()" 因为在以下情况下也使用相同的代码它不是紧邻的下一个元素。有什么办法可以解决这个问题吗？

预先感谢您的任何意见/建议。

原文

I have been working on some more complex form where the fields are shown depending on some conditions of the values entered within a form.

However, when the form is entered through <Tab> key (<Tab> key->enter value-><Tab> key), it does not go to the newly appeared field, but to the one which was previously visible.

The following is the simplified example. If you write anything to field with number 1, on change event is triggered and the input with value 2 is shown, but not the next to be focused on.

<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>

Due to its complexity, I would not like to play with direct control of the <Tab> key.
Further, I cannot use the onchange="$('#input2').show();$('#input2').focus()" since the same code is used also in cases when it is not an immediate next element.
Are there any ways to solve this?

Thanks in advance for any comments/suggestions.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

笨笨の傻瓜 2025-01-05 03:58:30

单击此处获取 jsFiddle 上的工作解决方案。

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

在示例中，您可以通过文本字段 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>

click here for a working solution on jsFiddle.

i used keypress to make this work.

in the example, you can tab forward and back through textfields 1, 3, and 5, then change the value of textfield 1 which shows textfield 2; you then can tab to textfield 2, 3, and 5 -- and so on.

i hope i have understood your challenge correctly and that this is helpful. cheers.

<!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>

回复收藏 0 原文

~没有更多了~