按 Enter 键时将焦点放在 tabindex 中的下一个元素

Question

我的应用程序上的用户习惯于在更改为下一个输入而不是“Tab”时按“Enter”，因此我一直在尝试在按“Enter”而不是“Tab”给出此代码时将焦点更改为下一个输入：

<div id="data">
  <input type="text" tabindex="0">
  <input type="text" value="Lorem ipsum" readonly><br/>
  <input type="text" value="Lorem ipsum" readonly>
  <input type="text" value="Lorem ipsum" readonly><br/>
  <input type="text" tabindex="1">
  <input type="text" tabindex="2">
</div>

现在我已经实现了它，我想分享我的解决方案，以便下一个遇到此问题的人能够快速找到解决方案。

Answer 1

解决方案

在我的例子中，我将$("#data")作为触发函数的目标，但你可以将它与$(window)一起使用。

这个函数会在 keydown 时被触发，会检查键是否是“Enter”（键代码是 13），根据 tabindex 寻找聚焦元素（activeElement）的下一个元素，然后聚焦它。

$("#data").keydown(function(e) {
  if(e.keyCode == 13){
    let active = document.activeElement;
    let target = $('[tabindex="' + (active.tabIndex + 1) + '"]');
    target.focus();
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="data">
  <input type="text" tabindex="0">
  <input type="text" value="Lorem ipsum" readonly><br/>
  <input type="text" value="Lorem ipsum" readonly>
  <input type="text" value="Lorem ipsum" readonly><br/>
  <input type="text" tabindex="1">
  <input type="text" tabindex="2">
</div>