我正在制作移动应用程序。我想实现这个功能,在按下键的同时,下一个输入字段被聚焦。我尝试过很多东西,但似乎都没有。这是我的代码。我尝试使用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 解决方案。提前谢谢。
答案 0 :(得分:10)
怎么样:
$('input.mobile-verify.pass').on('keyup', function() {
if ($(this).val()) {
$(this).next().focus();
}
});
因此,在关键时,如果有值,请关注下一个。使用keyup可以验证内容而不是立即跳过。他们可能会在iOS上切换到数字模式,例如,如果你只是使用按键,就会触发焦点。
答案 1 :(得分:5)
$(".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
属性功能的其他解决方案
答案 2 :(得分:3)
尝试.keypress()&amp; jQuery中的.focus()函数
答案 3 :(得分:3)
JavaScript和事件keypress
和focus
以及密钥号验证:
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;
答案 4 :(得分:1)
摘录:
$(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
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个元素之间的小空间的文本
答案 5 :(得分:0)
其他人已经编写了解决方案。我只想补充一下
[].slice.call
是解决我的问题的原因。我无法集中关注某个元素,因为它属于Element类型,而不是HtmlElement类型。但是以某种方式,这部分代码会将我的Elements的querySelectorAll列表转换为HtmlElements。
谢谢Yosvel Quintero