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

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解决方案.提前致谢.

Answer 1

怎么样:

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

所以在关键时,如果有值,则关注下一个.使用keyup可以验证内容而不是立即跳过.他们可能会在iOS上切换到数字模式,例如,如果您只是使用按键,则会触发焦点.

Codepen:http://codepen.io/anon/pen/qaGKzk

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[]" />

Answer 3

使用.next()和.trigger():

$(".mobile-verify.pass").on("keypress", function(e){
  $(this).next().trigger("focus");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

附注:找到maxlength属性功能的另一种解决方案,根据输入类型="数字"忽略maxlength