当字符插入输入文本框时，标签光标

Question

这是一个小小的例子：

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小提琴可以看出，当用户从键盘输入一个字母时，光标会切换到下一个空白输入文本框。当用户单击一个字符按钮并将其插入文本框时，如何复制同样的行为（跳到下一个空白处）。

Answer 1

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

fiddle