javascript - 当您按 Tab 时，它应该 Tab 到下一个空白文本输入框 JavaScript，而不使用 Tab 索引

Question

表单中有多个输入字段的示例，因为有一些字段在此之前会自动填充，如果我按 Tab 键，那么它应该跳过该自动填充的输入字段并应转到空白输入字段

我尝试过，但是当我开始在空白输入中写入时会发生什么，它也会自动填充并跳过它

$(".item-input").keyup(function () {
    if (this.value.length !== 0) {
        var $next = $(this).next('.item-input');
        if ($next.length)
            $(this).next('.item-input').focus();
        else
            $(this).blur();
    }
});

Answer 1

我会将事件更改为 keydown 而不是 keyup，因为 keyup 本身已经处理了选项卡事件，并且没有那时您可以进行真正的取消(在选择下一个空代码之前，您将直观地看到它跳转到下一个字段)

剩下的，我建议你先获取所有元素，然后检查哪个字段触发了事件，然后从索引+1开始检查其他字段

所以总的来说，我想我会编写如下代码(不需要模糊您当前所在的字段，聚焦新字段即可)

有一个 shiftKey 的句柄，以便用户仍然可以使用 shift+tab 返回:)(我在该检查来源的链接中评论了)

let itemInputs = Array.from( document.querySelectorAll('.item-input') );

$('.item-input').on('keydown', function( e ) {
  if (e.shiftKey) {
    // no handling here
    // see: https://stackoverflow.com/questions/3044083/what-is-the-key-code-for-shifttab
    return;
  }
  switch (e.keyCode) {
    case 9:
      // we could have the loop in here, but hey, default returns out of the function
      // so this just skips till behind the switch statement
      break;
    default:
      return;
  }
  // find where we are in the original fieldset
  let index = itemInputs.findIndex( v => e.target === v ) + 1;
  // if we are equal or larger then itemInputs
  while (index < itemInputs.length) {
    if (itemInputs[index].value.length === 0) {
      // prevent the default step
      e.preventDefault();
      itemInputs[index].focus();
      return;
    }
    // try next
    index++;
  }
} );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset>
  <div class="field">
    <span class="label">Text 1</span>
    <span class="value"><input type="text" value="" class="item-input" /></span>
  </div>
  <div class="field">
    <span class="label">Text 2</span>
    <span class="value"><input type="text" value="Skip me" class="item-input" /></span>
  </div>
  <div class="field">
    <span class="label">Text 3</span>
    <span class="value"><input type="text" value="" class="item-input" /></span>
  </div>
  <div class="field">
    <span class="label">Text 4</span>
    <span class="value"><input type="text" value="" class="item-input" /></span>
  </div>
</fieldset>