没有使用 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;
            }
        }
    }
}

您可以观察字段中的输入并测试其值：

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

您可以使用纯 JavaScript：

见演示。

用 来检查字符长度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();
    }
}

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

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

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

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