自動跳至下一個空白文本輸入框

Question

這是我一直在努力的jsfiddle示例：

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

HTML：

<input type="text" maxlength="1" size="1"/>
<input type="text" maxlength="1" value="e" tabindex="-1" size="1" readonly />
<input type="text" maxlength="1" size="1"/>
<input type="text" maxlength="1" value="r" tabindex="-1" size="1" readonly />
<input type="text" maxlength="1" size="1"/>

JS：

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

在上面的示例中，如果我從最左側的文本框開始，那么如何做到這一點，所以當將字符輸入此文本框時，光標會前進到下一個空白文本框（而不是下一個填充的文本框）---對於其他文本框，將以這種方式繼續。

Answer 1

這應該可以解決問題：

$("input").on("input", function () {
    var $this = $(this);
    if ($this.val().length >= parseInt($this.attr("maxlength"), 10)) {
        var nextEmpty = $this.nextAll("input[value=''], input:not([value])")[0];
        if (nextEmpty) {
            nextEmpty.focus();
        }
    }
});

它將找到具有空值屬性或根本沒有值屬性的第一個input同級。 如果找到了這樣的兄弟姐妹，它將成為焦點。

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

請注意，我刪除了setTimeout函數，因為它對於超時為0似乎毫無用處...