输入字符时标签光标

Question

这是一个JS小提琴示例：

http://jsfiddle.net/t3u8q5vr/1/

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);
    var $curInputNode = $('input.active');

    while($curInputNode.is('input:text') && $curInputNode.val() != ''){
        $curInputNode = $curInputNode.next();
    }
    $curInputNode.focus();
});

上面我一直在研究的JSFiddle有我想要应用到我的网站的所需行为（当通过键盘插入字符或通过单击其中一个按钮插入文本时，它会自动显示）。

当我将此代码应用到我的网站时，只需单击一下按钮（例如á）即可插入两个á字符：

有关为何发生这种情况的任何想法？