腾讯云

开发者社区

文档建议反馈控制台

首页

文章/答案/技术大牛

发布

社区首页 >问答首页 >一旦达到最大长度值，将焦点放在下一个输入上

问一旦达到最大长度值，将焦点放在下一个输入上
EN

Stack Overflow用户

提问于 2013-03-24 05:54:49

回答 10查看 92.1K关注 0票数 41

当前一个输入达到它的最大长度值时，我如何聚焦下一个输入？

a: <input type="text" maxlength="5" />
b: <input type="text" maxlength="5" />
c: <input type="text" maxlength="5" />

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

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

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

javascript

jquery

iteration

counter

性能强劲，每月20元起的MySQL

功能完善，便宜稳定，没有业务可以自动停机，强效降本的MySQL

回答 10

Stack Overflow用户

回答已采纳

发布于 2013-03-24 06:10:55

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

从maxlength attribute.

Scales读取container.

Automatically中任意数量的输入时，
会找到下一个要聚焦的输入。
No 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;
            }
        }
    }
}

票数 58

Stack Overflow用户

发布于 2013-03-24 05:58:21

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

$("input").bind("input", function() {
    var $this = $(this);
    setTimeout(function() {
        if ( $this.val().length >= parseInt($this.attr("maxlength"),10) )
            $this.next("input").focus();
    },0);
});

Working demo。

setTimeout的存在是为了确保代码仅在完成输入并更新值后运行。Binding input确保大多数类型的输入都会触发事件，包括按键、复制/粘贴(甚至是从鼠标)和拖放(尽管在这种情况下，拖放将不起作用，因为焦点在可拖动对象上，而不是可放置对象上)。

注意:在一些较旧的浏览器上，您可能还需要绑定propertychange。

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

为此，您可能需要使用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，循环将停止，因此输入将在最后一个字段中被截断。

票数 25

Stack Overflow用户

发布于 2013-03-24 06:00:45

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