如何将下一个输入字段集中在按键上

Question

我正在制作一个移动应用程序。我想在按下键时实现此功能，下一个输入字段将成为焦点。我尝试了很多东西，但似乎都没有用。这是我的代码。我尝试使用 onClick，但是当我触摸它时，它会转到下一个字段。

 <input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />

我想要一个纯 Jquery 或 Javascript 解决方案。提前致谢。

原文由 Ali Zia 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

怎么样：

 $('input.mobile-verify.pass').on('keyup', function() {
    if ($(this).val()) {
        $(this).next().focus();
    }
});

所以在键上，如果有一个值，请关注下一个。使用 keyup 允许您验证内容而不是立即跳过。例如，他们可能会在 iOS 上切换到数字模式，如果您仅使用按键，这将触发焦点。

代码笔： http ://codepen.io/anon/pen/qaGKzk

原文由 OK sure 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

JavaScript 和事件 keypress 和 focus 以及关键数字验证：

 document
  .querySelectorAll('.mobile-verify.pass')
  .forEach(el => el.onkeyup = e => e.target.value && el.nextElementSibling.focus())

 input {
  display: flex;
  margin: 4px 0;
}

 <input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />
<input type="number" class="mobile-verify pass" maxlength="1" name="code[]" />

原文由 Yosvel Quintero 发布，翻译遵循 CC BY-SA 4.0 许可协议