如何将下一个输入字段集中在按键上 [英] How to focus next input field on keypress

问题描述

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

I am making a mobile application. I want to implement this function where on pressing the key, the next input field is focused. I tried many things but none seem to be working. This is my code. I tried using onClick but when i touch it, it goes to the next field.

<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 解。提前致谢。

I want a pure Jquery or Javascript solution. Thanks in advance.

推荐答案

怎么样：

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

因此，在关键时，如果有值，请关注下一个。使用keyup可以验证内容而不是立即跳过。他们可能会在iOS上切换到数字模式，例如，只要你使用按键就会触发焦点。

So on key up, if there is a value, focus the next. Using keyup allows you to validate the contents rather than skipping right away. They might switch to number mode on iOS for example which would trigger the focus if you simply use keypress.

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

这篇关于如何将下一个输入字段集中在按键上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！