无法将焦点设置到下一个文本框

Question

我有三个文本框都带有"initialbox"类.

每个框的最大长度为1个字符.当一个框填充了一个字符时,下一个框应该设置为焦点.(与使用TAB键的方式完全相同).

我添加了alert()以便检查事件是否触发,它是,但是$(this).next('.initialbox').focus()没有将焦点设置到下一个选项卡.我也尝试过使用$(this).next.focus().

非常感谢.

HTML:

<table style="width:100%;">
    <tr>
        <td style="width:33.3%">
            <input type="text" class="initialbox" maxlength="1" size="1" id="firstinitial" />
        </td>
        <td style="width:33.3%">
            <input type="text" class="initialbox" maxlength="1" size="1" id="secondinitial" />
        </td>
        <td style="width:33.3%">
            <input type="text" class="initialbox" maxlength="1" size="1" id="thirdinitial" />
        </td>
    </tr>
    <tr>
        <td style="width:33.3%">1st Initial</td>
        <td style="width:33.3%">2nd Initial</td>
        <td style="width:33.3%">3rd Initial</td>
    </tr>
</table>

JQuery的:

$(".initialbox").keyup(function () {
    if (this.value.length == 1) {
        alert();
        $(this).next('.initialbox').focus();
    }
});

JSFiddle:http://jsfiddle.net/v9y51pds/1/

Answer 1

您不能使用.next()标记,因为您的.initialbox输入元素不是兄弟.

你需要遍历父(closest())<td>,它的邻居<td>,然后找到.initialbox内部:

$(".initialbox").keyup(function () {
    if (this.value.length == 1) {
        alert();
        $(this).closest('td').next('td').find('.initialbox').focus();
    }
});