javascript - 当字符插入输入文本框时制表符光标

Question

这是一个 js fiddle 示例:

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

HTML:

<input type="text" maxlength="1" size="1" />
<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" />

<div>
<button class="buttons">á</button>
<button class="buttons">é</button>
<button class="buttons">í</button>
<button class="buttons">ó</button>
<button class="buttons">ú</button>
<button class="buttons">ñ</button>
<button class="buttons">ü</button>
</div>

JS:

$("input").bind("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').focus(function(){
        $(this).addClass('active').siblings('.active').removeClass('active')
});

    $(".buttons").click(function () {
        var cntrl = $(this).html();
        $('input.active').val(cntrl);
    });

从js fiddle 中可以看出，当用户从键盘输入字母时，光标会跳到下一个空白输入文本框。当用户单击字符按钮并将其插入文本框时，如何复制相同的行为(跳至下一个空白)。

Answer 1

$('input.active').next().focus();

fiddle