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

使用.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 ignored for input type=“number”

找到maxlength属性功能的其他解决方案

Answer 3

尝试.keypress（）＆amp; jQuery中的.focus（）函数

https://api.jquery.com/keypress/

https://api.jquery.com/focus/

Answer 4

JavaScript和事件keypress和focus以及密钥号验证：

＆＃13;

var elems = [].slice.call(document.querySelectorAll('.mobile-verify.pass'));

elems.forEach(function(el, i, array) {
  el.onkeypress = function(event) {
    // Validate key is a number
    var keycode = event.which;
    if (!(event.shiftKey === false && 
        (keycode === 46 || keycode === 8 || keycode === 37 || keycode === 39 || 
        (keycode >= 48 && keycode <= 57)))) {
      return;
    }

    var nextInput = i + 1;
    if (nextInput < array.length) {
        array[nextInput].focus();
    }
  };
});

＆＃13;

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

＆＃13;

Answer 5

使用。keypress()和.focus()

摘录：

＆＃13;

$(document).ready(function (){
  $("input.mobile-verify.pass").keypress(function(){
    $(this).next().trigger('focus');
    //or $(this).next().focus();	
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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[]" />

＆＃13;

使用完整的JS

＆＃13;

var allElements = document.querySelectorAll('.mobile-verify.pass');
var i;
for (i = 0; i < allElements.length; i++) {
  var el = allElements[i];
  el.addEventListener("keypress", function () {
    this.nextSibling.nextSibling.focus();
  });
}

＆＃13;

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

＆＃13;

NB：如果你问，为什么2 nextSibling，答案是第一个兄弟是代表2个元素之间的小空间的文本

Answer 6

其他人已经编写了解决方案。我只想补充一下

[].slice.call

是解决我的问题的原因。我无法集中关注某个元素，因为它属于Element类型，而不是HtmlElement类型。但是以某种方式，这部分代码会将我的Elements的querySelectorAll列表转换为HtmlElements。

谢谢Yosvel Quintero

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

6 个答案: