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

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();
    }
});