达到最大长度值后，将下一个输入聚焦
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了达到最大长度值后，将下一个输入聚焦相关的知识，希望对你有一定的参考价值。
一旦前一个输入达到最大长度值，如何关注下一个输入？
a: <input type="text" maxlength="5" />
b: <input type="text" maxlength="5" />
c: <input type="text" maxlength="5" />
如果用户粘贴的文本大于maxlength，理想情况下它应该溢出到下一个输入中。
的jsfiddle：http://jsfiddle.net/4m5fg/1/
我必须强调，我不想使用插件，因为我更愿意学习它背后的逻辑，而不是使用已经存在的东西。感谢您的理解。
没有使用jQuery，是一个非常干净的实现：
- 从maxlength属性读取。
- 缩放到容器内的任意数量的输入。
- 自动查找要关注的下一个输入。
- 没有jQuery。
<div class="container">
a: <input type="text" maxlength="5" />
b: <input type="text" maxlength="5" />
c: <input type="text" maxlength="5" />
</div>
..
var container = document.getElementsByClassName("container")[0];
container.onkeyup = function(e) {
var target = e.srcElement || e.target;
var maxLength = parseInt(target.attributes["maxlength"].value, 10);
var myLength = target.value.length;
if (myLength >= maxLength) {
var next = target;
while (next = next.nextElementSibling) {
if (next == null)
break;
if (next.tagName.toLowerCase() === "input") {
next.focus();
break;
}
}
}
// Move to previous field if empty (user pressed backspace)
else if (myLength === 0) {
var previous = target;
while (previous = previous.previousElementSibling) {
if (previous == null)
break;
if (previous.tagName.toLowerCase() === "input") {
previous.focus();
break;
}
}
}
}
您可以在字段中查看输入并测试其值：
$("input").bind("input", function() {
var $this = $(this);
setTimeout(function() {
if ( $this.val().length >= parseInt($this.attr("maxlength"),10) )
$this.next("input").focus();
},0);
});
setTimeout用于确保代码仅在输入完成且值更新后才会运行。绑定input确保大多数类型的输入将触发事件，包括按键，复制/粘贴（甚至从鼠标）和拖放（虽然在这种情况下，后者将无法工作，因为焦点在于可拖动，而不是可放置的）。
注意：在某些旧版浏览器中，您可能还需要绑定propertychange。
如果用户粘贴的文本大于maxlength，理想情况下它应该溢出到下一个输入中。
为此，您可能需要使用javascript删除maxlength属性（以便能够捕获完整输入），并自己实现该功能。我做了一个small example，相关部分如下：
$("input").each(function() {
var $this = $(this);
$(this).data("maxlength", $this.prop("maxlength"));
$(this).removeAttr("maxlength");
})
这将删除该属性，但将其保存在data中，以便您以后可以访问它。
function spill($this, val) {
var maxlength = $this.data("maxlength");
if ( val.length >= maxlength ) {
$this.val(val.substring(0, maxlength));
var next = $this.next("input").focus();
spill(next, val.substring(maxlength));
}
else
$this.val(val);
}
这里最大长度逻辑在JavaScript中重新引入，以及获取“丢弃”部分并在对spill的递归调用中使用它。如果没有下一个元素，对data的调用将返回undefined并且循环将停止，因此输入将在最后一个字段中被截断。
您可以使用纯JavaScript：
见DEMO。
用el.value.length检查字符长度。如果它等于最大值，请使用focus()移动到下一个字段。使用onkeyup将此函数绑定到keyup事件，以便每次用户键入字符后该函数都会触发。
var a = document.getElementById("a"),
b = document.getElementById("b"),
c = document.getElementById("c");
a.onkeyup = function() {
if (this.value.length === parseInt(this.attributes["maxlength"].value)) {
b.focus();
}
}
b.onkeyup = function() {
if (this.value.length === parseInt(this.attributes["maxlength"].value)) {
c.focus();
}
}
如果你要有很多领域，你可以做这样的事情。
基本上在keyup获取输入的长度，然后将其与maxlength进行比较，如果匹配，则将focus与下一个输入字段进行比较。
http://jsfiddle.net/btevfik/DVxDA/
$(document).ready(function(){
$('input').keyup(function(){
if(this.value.length==$(this).attr("maxlength")){
$(this).next().focus();
}
});
});
如果要动态添加输入文本字段，则可以尝试此操作。
这将重新将脚本注入DOM并完美地运行。
$('body').on('keyup', '#num_1',function(){
if (this.value.length === parseInt(this.attributes["maxlength"].value)) {
$('#num_2').focus();
}
})
$('body').on('keyup','#num_2', function(){
if (this.value.length === parseInt(this.attributes["maxlength"].value)) {
$('#num_3').focus();
}
})<input type="text" class="form-control" name="number" maxlength="3" id="num_1">
<input type="text" class="form-control" name="number" maxlength="3" id="num_2">
<input type="text" class="form-control" name="number" maxlength="4" id="num_3">如果您专注于创建卡（借记/贷记）号码输入类型。然后清理一个易于管理的jQuery版本，如下所示：
/*..............................................................................................
* jQuery function for Credit card number input group
......................................................................................................*/
// make container label of input groups, responsible
$('.card-box').on('focus', function(e){
$(this).parent().addClass('focus-form-control');
});
$('.card-box').on('blur', function(e){
$(this).parent().removeClass('focus-form-control');
});
$('.card-box-1').on('keyup', function(e){
e.preventDefault();
var max_length = parseInt($(this).attr('maxLength'));
var _length = parseInt($(this).val().length);
if(_length >= max_length) {
$('.card-box-2').focus().removeAttr('readonly');
$(this).attr('readonly', 'readonly');
}
if(_length <= 0){
return;
}
});
$('.card-box-2').on('keyup', function(e){
e.preventDefault();
var max_length = parseInt($(this).attr('maxLength'));
var _length = parseInt($(this).val().length);
if(_length >= max_length) {
$('.card-box-3').focus().removeAttr('readonly');
$(this).attr('readonly', 'readonly');
}
if(_length <= 0){
$('.card-box-1').focus().removeAttr('readonly');
$(this).attr('readonly', 'readonly');
}
});
$('.card-box-3').on('keyup', function(e){
e.preventDefault();
var max_length = parseInt($(this).attr('maxLength'));
var _length = parseInt($(this).val().length);
if(_length >= max_length) {
$('.card-box-4').focus().removeAttr('readonly');
$(this).attr('readonly', 'readonly');
}
if(_length <= 0){
$('.card-box-2').focus().removeAttr('readonly');
$(this).attr('readonly', 'readonly');
}
});
$('.card-box-4').on('keyup', function(e){
e.preventDef以上是关于达到最大长度值后，将下一个输入聚焦的主要内容，如果未能解决你的问题，请参考以下文章
达到条目最大长度时的 Xamarin DisplayAlert
vue的input输入框，动态更改value值后获取不到问题