使用选项卡而不是移动到第二个表单时，请将焦点循环放在表单的输入上

Question

我想在按下 tab 时将焦点限制在一个表单上。
我的意思是关注表单 1 的选项卡索引 1、2 和 3，然后在同一表单内移回 1，然后是 2，等等，永远不会形成 2 的输入。我也不想更改标签索引。

<form style="background-color:red">
    <input tabindex="01"/>
    <input tabindex="02"/>
    <input tabindex="03"/>
</form>

<form style="background-color:blue">
    <input tabindex="01"/>
    <input tabindex="02"/>
    <input tabindex="03"/>
</form>

Answer 1

这不是一个好的做法，所以不要这样做，除非确实有这样做的充分理由...

但是没有内置的 HTML 方法来执行此操作，因此我们需要使用一些 JavaScript 以及自定义 data attribute.

我认为对 parent（<form>）使用数据属性最简单，这样我们就不必添加它每个输入单独。我将我的命名为 data-tabgroup.

然后我们需要一些 JS:

// Select the tab groups based on the data attribute we added
var tabgroups = document.querySelectorAll("[data-tabgroup]");

// Loop through each to attach the listeners we need
for (var i = 0; i < tabgroups.length; i++) {
  var inputs = tabgroups[i].querySelectorAll("[tabindex]");

  // Loop through all of the elements we want the tab to be changed for
  for (var j = 0; j < inputs.length; j++) {

    // Listen for the tab pressed on these elements
    inputs[j].addEventListener("keydown", function(myIndex, inputs, e) {
      if (e.key === "Tab") {
        // Prevent the default tab behavior
        e.preventDefault();

        // Focus the next one in the group
        if (inputs[myIndex + 1]) {
          inputs[myIndex + 1].focus();
        } else { // Or focus the first one again
          inputs[0].focus();
        }
      }
    }.bind(null, j, inputs)) // Make a copy of the variables to use in the addEventListener
  }
}

<form style="background-color: red" data-tabgroup>
  <input tabindex="01" />
  <input tabindex="02" />
  <input tabindex="03" />
</form>

<form style="background-color: blue" data-tabgroup>
  <input tabindex="01" />
  <input tabindex="02" />
  <input tabindex="03" />
</form>

就是这样！这是 demo.

一些注意事项：

当前的实现忽略组内 tabindex 的值（它只选择 HTML 中的下一个值）。考虑到这一点，您只需要将元素按其 tabindex 的顺序放入数组中，或者在将它们添加到数组后按 tabindex 对它们进行排序。
当前的实施要求将 tabindex 应用于您希望其影响的 children。如果您希望它默认应用于所有输入，只需将 inputs 的 querySelectorAll 值更改为 input。如果您想要更复杂的东西，则必须根据需要进行更改。

Answer 2

<input type="text" class="first-index"/>

<input type="text" />

<button type="button" class="last-index">save</button>

<script>
    $(document).on('blur','.last-index',function() {
      $('.first-index').focus();
    });
</script>

使用选项卡而不是移动到第二个表单时，请将焦点循环放在表单的输入上

Keep focus looping on inputs of form when using tab instead of moving to second form

html

tabs

tabindex