Question

标题说明了这一点，自动选项卡不适用于两个文本框之间的文本。

基本上，当两个文本框之间有一个跨度时，它不会在两个文本框之间切换。

这是行不通的：

HTML

<input class="fill-out" type="text" maxlength="1"/>
<span class="text">x</span>
<input class="fill-out" type="text" maxlength="1"/>
<span class="text">x</span>
<input class="fill-out" type="text" maxlength="1"/>

JavaScript

$(".fill-out").keyup(function () {
    debugger
        if (this.value.length == this.maxLength) {
          $(this).next('.fill-out').focus();
        }
  });

正如我在上面说的那样，它是行不通的，但是，如果我移除两个跨度，一切都将正常工作。

JavaScript保持不变，我只删除了两个范围：

HTML

<input class="fill-out" type="text" maxlength="1"/>
<input class="fill-out" type="text" maxlength="1"/>
<input class="fill-out" type="text" maxlength="1"/>

JavaScript

$(".fill-out").keyup(function () {
    debugger
        if (this.value.length == this.maxLength) {
          $(this).next('.fill-out').focus();
        }
  });

任何人都可以解释原因，或者是否还有其他方法可以做到这一点？

Answer 1

在jQuery中，next()将找到紧随其后的元素。使用选择器意味着，如果该元素与您的选择器匹配，它只会返回紧随其后的元素。

您应该改用nextAll()，它将找到所有适合选择器的项...然后使用first()使用第一个。

$(".fill-out").keyup(function () {
  if (this.value.length == this.maxLength) {
    $(this).nextAll('.fill-out').first().focus();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input class="fill-out" type="text" maxlength="1"/>
<span class="text">x</span>
<input class="fill-out" type="text" maxlength="1"/>
<span class="text">x</span>
<input class="fill-out" type="text" maxlength="1"/>

或者，您也可以使用CSS伪类:first代替first() ...

$(this).nextAll('.fill-out:first').focus();

真的，这应该是一个新问题，但是基于OP的评论...

如果不再需要文本框，是否可以取消选择文本框？

要在输入最后一项之后“取消选择”光标，可以执行以下操作，在其中存储“下一项”，如果不存在，则blur()当前项。

$(".fill-out").keyup(function () {
  if (this.value.length == this.maxLength) {
    var $next = $(this).nextAll('.fill-out').first().focus();
    if ($next.length == 0) {
      $(this).blur();
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input class="fill-out" type="text" maxlength="1"/>
<span class="text">x</span>
<input class="fill-out" type="text" maxlength="1"/>
<span class="text">x</span>
<input class="fill-out" type="text" maxlength="1"/>

您无需创建var $next，但是我认为比直接将.length转换为以下内容的内容更容易阅读...

if ($(this).nextAll('.fill-out').first().focus().length == 0) {
  $(this).blur();
}

自动标签对中间的文字不起作用吗？

1 个答案: