达到最大长度值后，将下一个输入聚焦

一旦前一个输入达到最大长度值，如何关注下一个输入？

a:  b:  c:  

如果用户粘贴的文本大于maxlength，理想情况下它应该溢出到下一个输入中。

jsFiddle： http ： //jsfiddle.net/4m5fg/1/

我必须强调，我不想使用插件，因为我更愿意学习它背后的逻辑，而不是使用已经存在的东西。 感谢您的理解。

Answer 1

没有使用jQuery，是一个非常干净的实现：

• 从maxlength属性读取。
• 缩放到容器内的任意数量的输入。
• 自动查找要关注的下一个输入。
• 没有jQuery。

http://jsfiddle.net/4m5fg/5/

 
 a:  b:  c:   

..

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

Answer 2

您可以在字段中查看输入并测试其值：

 $("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属性（以便能够捕获完整的输入），并自己实现该function。 我做了一个小例子 ，相关部分如下：

 $("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并且循环将停止，因此输入将在最后一个字段中被截断。

Answer 3

如果你要有很多领域，你可以做这样的事情。

基本上在keyup获取输入的长度，然后将其与maxlength进行比较，如果匹配，则将focus放在下一个输入字段上。

http://jsfiddle.net/btevfik/DVxDA/

 $(document).ready(function(){ $('input').keyup(function(){ if(this.value.length==$(this).attr("maxlength")){ $(this).next().focus(); } }); }); 

Answer 4

您可以使用纯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(); } } 

Answer 5

如果要动态添加输入文本字段，则可以尝试此操作。

这将重新将脚本注入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(); } }) 

Answer 6

如果您专注于创建卡（借记/贷记）号码输入类型。 然后清理一个易于管理的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.preventDefault(); var max_length = parseInt($(this).attr('maxLength')); var _length = parseInt($(this).val().length); if(_length >= max_length) { return; } if(_length <= 0){ $('.card-box-3').focus().removeAttr('readonly'); $(this).attr('readonly', 'readonly'); } }); /*.............................................................................................. * End jQuery function for Credit card number input group ......................................................................................................*/ 

 /* Hide HTML5 Up and Down arrows. */ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; } .card-box { width: 20%; display: inline-block; height: 100%; border: none; } .focus-form-control { border-color: #66afe9; outline: 0;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); } 

Answer 7

更新的btevfik代码，Onkeyup或onkeydown将在选项卡导航上产生问题。 编辑或更改输入框内的文本将很困难，因为它将限制为maxlength。 所以我们可以使用oninput事件来完成任务。

DEMO

HTML

 
 
a: 
 
b: 
 
c: 
 
d: 
 
e: 
 
f: 
 
g: 
  

使用Javascript

 $(document).ready(function(){ $('input').on("input", function(){ if($(this).val().length==$(this).attr("maxlength")){ $(this).next().focus(); } }); }); 

CSS

 ul {list-style-type:none;} li {padding:5px 5px;} 

Answer 8

如果前一个字段具有有效长度，则已validation的答案有一个问题，该问

我有修改上面的答案来修复以前标签的完整长度

 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; // Move to previous field if backspace is pressed if (code == 8) { previous = previous.previousElementSibling; if (previous != null) { if (previous.tagName.toLowerCase() === "input") { previous.focus(); } } } else { while (previous = previous.previousElementSibling) { if (previous == null) break; if (previous.tagName.toLowerCase() === "input") { var mLength = parseInt(previous.attributes["maxlength"].value, 10); var pMyLength = previous.value.length; // Move to previous field if it does not have required length if (mLength == pMyLength) { break; } else { previous.focus(); break; } } } } } }