Question

我有三个文本框，所有这些文字都包含在＆＃34; initialbox＆＃34;。

中

每个方框的最大长度为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();
    }
});

Answer 2

试试这个（对于小提琴中的代码）：

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

See it work here

问题是$(this).next()正在看兄弟姐妹，而不是整个dom。因此，您需要遍历dom以找到下一个要关注的元素。

_{（已编辑为将“td”添加到.parent()和.next()位以使其更清晰显示正在进行的操作）}

Answer 3

遍历DOM的另一种方法是获取$('.initialbox')集合中输入的 index 。

然后您可以直接转到下一个输入：

$('.initialbox').keyup(function() {
  var idx= $('.initialbox').index(this);
  if(this.value.length == 1) {
    $('.initialbox').eq(idx+1).focus();
  }
});

Fiddle

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

3 个答案: