Question

在输入中输入maxlength个字符后，我需要关注下一个输入。问题是下一个输入并不总是兄弟姐妹：

＆＃13;

jQuery("input").on('input', function() {
  if (jQuery(this).val().length == jQuery(this).attr('maxlength')) {
    jQuery(this).next("input").focus();
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
When you have write 4 char, the focus have to switch to the next input:
<div>
  OK
  <input maxlength="4">
  <input maxlength="4">
</div>
KO
<input id="inputWithTheIssue">

＆＃13;

Answer 1

您无法使用.next()函数，因为所有inputs都不是兄弟姐妹。因此，您需要在整个输入控件集中找到当前输入的index，并将其递增1以查找下一个发生的输入元素。

jQuery("input").on('input',function () {
            if(jQuery(this).val().length == jQuery(this).attr('maxlength')) {
              var currIndex = $(this).index();  // gets the index value w.r.t the other input controls
              $('input').eq(currIndex + 1).focus();
            }
        });

工作示例：https://jsfiddle.net/DinoMyte/uhpn7pyx/2/

Answer 2

您需要做几件事。

为元素添加[type =“text”]属性。
使用正确的父元素来获取子输入。（我使用的文档可能不适合您的场景。）

var $check = $(document).find('input[type="text"]');
jQuery("input").on('input', function() {
  if (jQuery(this).val().length == jQuery(this).attr('maxlength')) {
    $check.eq($check.index(this) + 1).focus();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
When you have write 4 char, the focus have to switch to the next input:
<div>
  OK
  <input maxlength="4" type="text">
  <input maxlength="4" type="text">
</div>
KO
<input id="inputWithTheIssue" type="text">

Answer 3

您明确要求使用jQuery解决方案，但您可以在纯JavaScript中轻松完成，而无需合并任何库。

function inputChanged(element, index, array) {
  element.oninput = function() {
    if (element.value.length >= 4 && (index < array.length - 1)) {
      array[index + 1].focus();
    }
  }
}

Array.from(document.getElementsByTagName('input')).forEach(inputChanged);

<div>
  <input maxlength="4"/>
  <input maxlength="4"/>
</div>
<input id="inputWithTheIssue"/>

我在这里做的是为文档中的每个inputChanged调用input函数。该函数采用参数：

element，其中包含调用它的元素，
index，其中包含input所有人调用此功能的信息，
array，用于存储所有input s。

在用户输入的这个功能中，我检查是否：

给定元素的值为4或更大，
如果我们不在所有input s中的最后位置。

如果是这样，我们将聚焦数组中的下一个元素。

即使你想用jQuery方法来解决你的问题，我希望你或者也许是其他人，会觉得这个答案很有帮助。

没有兄弟的时候用jquery找到下一个

3 个答案: