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

Question

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

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/

我必须强调,我不希望使用的插件,因为我宁愿学习背后的逻辑,不是使用已经存在的东西.感谢您的理解.

Answer 1

没有使用jQuery,是一个非常干净的实现:

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

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

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

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,理想情况下它应该溢出到下一个输入中.

为此,您可能需要maxlength使用JavaScript 删除该属性(以便能够捕获完整的输入),并自己实现该功能.我做了一个小例子,相关部分如下:

$("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

您可以使用纯JavaScript:

见DEMO.

检查字符长度el.value.length.如果它等于最大值,请使用移至下一个字段focus().将此函数绑定到keyup事件,onkeyup以便在用户键入字符后每次触发该函数.

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 4

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

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

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

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