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。

我认为最简单的方法是将数据属性用于父（<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的顺序将元素放在数组中，或者在将它们添加到数组后按tabindexes对它们进行排序。
当前的实施要求tabindex应用于您希望其影响的儿童。如果您希望默认情况下将其应用于所有输入，只需将querySelectorAll的{{1}}值更改为inputs即可。如果你想要更复杂的东西，你必须根据需要改变它。

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>

使用制表符而不是移动到第二种形式时，将焦点循环保持在表单的输入上

2 个答案: