自動選項卡下一個空白文本輸入框

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/

注意，我刪除，因爲它似乎是爲0的超時沒有用的setTimeout函數...