自动选项卡下一个空白文本输入框

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函数...