为什么按键不起作用

Question

我正在尝试使我的输入文本字段在键盘输入时集中在下一行。

jQuery代码：

for (var counter = 0; counter < 4; counter++) {
    $("<input>", {
        "class":"anBox",
        size: 1,
        maxlength: 1
    }).appendTo('#answerLine_' + counter);
};
$(".anBox").keyup(function () {
    if (this.value.length == this.maxLength) {
      $(this).next('.anBox').focus();
    }
});

这是一个： jsfiddle

Answer 1

您对.next()的使用不正确。 .next()函数查找当前集中元素的下一个同级 ，还可以选择检查下一个同级是否与提供的选择器匹配。

但是，您的<input>元素位于不同的<span>元素中，因此它们不是兄弟姐妹，因此无法使用.next()进行匹配。

您需要做的是从当前的<input> （ $(this) ）到其父项（ .parent() ），再到下一个<span>元素（ .next()或.next('span') ），然后在该（ .find('.anBox') ）内部找到.anBox元素，然后对其进行聚焦（ .focus() ）。 看起来像这样：

$(this).parent().next().find('.anBox').focus();

看一下更新的jsFiddle演示 。

Answer 2

您对.next（）的使用不正确。尝试使用

$(this).parent().next('span').find('.anBox').focus();

Answer 3

因为.anBox没有“下一个”。 下一个.anBox在另一个范围中。 您必须爬上一个父跨度，然后转到下一个跨度，并在其中找到一个.anBox ：

if (this.value.length == this.maxLength) {
  $(this).parent().next().find('.anBox').focus();
}

另外，您正在与脚本中始终为“ 1”的maxLength进行比较。 如果您按下“ 1”，则下一个输入框将仅聚焦

Answer 4

next()不会为您提供DOM中的下一个匹配元素。 如果它与您作为选择器通过的内容匹配，则仅给您下一个同级。

为了获得您想要的东西，可以使用nextInDOM（）实用程序（ 免责声明：我是作者 ）并像下面这样使用它：

$(this).nextInDOM('.anBox').focus();