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

【问题标题】：How to focus next input field on keypress如何将下一个输入字段集中在按键上
【发布时间】：2017-03-11 08:08:39
【问题描述】：

我正在制作一个移动应用程序。我想实现这个功能，在按下键时，下一个输入字段被聚焦。我尝试了很多东西，但似乎都没有。这是我的代码。我尝试使用 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 解决方案。提前致谢。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

怎么样：

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

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

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

【讨论】：

【解决方案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 属性功能寻找另一个解决方案，根据maxlength ignored for input type=“number”

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

在 jQuery 中尝试 .keypress() 和 .focus() 函数。

【讨论】：

【解决方案5】：

使用 .keypress() 和 .focus()

sn-p：

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

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

带有完整的JS

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();
  });
}

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

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

【讨论】：

我真的很喜欢这个解决方案。但是，它要求下一个输入字段跟在前一个字段之后。遗憾的是我不能使用它，因为我在标签之间有动态数量的<span> 标签:(

【解决方案6】：

其他人已经编写了解决方案。我只是想添加那部分

[].slice.call

解决了我的问题。我无法聚焦元素，因为它是 Element 类型，而不是 HtmlElement。但不知何故，这部分代码正在将我的 querySelectorAll 元素列表转换为 HtmlElements。

谢谢 Yosvel Quintero

【讨论】：