Question

我试图在触发按键时自动跳转到下一个输入，但是我的代码不起作用，我相信它与下一个（）选择的待办事项，但似乎无法正确选择它。

HTML表单

<form method="POST" action="">
    <div id="confirm-input">
        @csrf
        <div class="col-xs-1">
            <input type="text" class="form-control input" maxlength="1"/>
        </div>
        <div class="col-xs-1">
            <input type="text" class="form-control input" maxlength="1"/>
        </div>
        <div class="col-xs-1">
            <input type="text" class="form-control input" maxlength="1"/>
        </div>
        <div class="col-xs-1">
            <input type="text" class="form-control input" maxlength="1"/>
        </div>
        <div class="col-xs-1">
            <input type="text" class="form-control input" maxlength="1"/>
        </div>
        <div class="col-xs-1">
            <input type="text" class="form-control input" maxlength="1"/>
        </div>
    </div>
</form>

JS代码

$('.input').keyup(function (e) {
        if (this.value.length == this.maxLength) {
            var next = $(this).nextAll('input').first();
            //Check if there is a next input.
            if (next.length) {
                next.focus();
            } else {
                $(this).blur
                //AJAX CALL
            }
        }
});

我正在使用nextAll（）因为我相信它可以看到div之外但没有任何运气。

Answer 1

＆＃34;我正在使用nextAll（）因为我相信它可以看到div之外但没有运气。＆＃34;

那就是你的问题。 nextAll()仅查看DOM中的同一树级别。（此处的Plunker演示：http://plnkr.co/edit/u5t2Oy636xvl82WIgmvp?p=preview）

一种可能的解决方案是让您的输入连续id秒，这样如果您当前的输入有id，例如＆＃34;输入-2＆＃34;，那么for＆＃34; input-3＆＃34;作为下一个要关注的输入。

更新

这是一个工作的Plunker，它说明了上述想法：http://plnkr.co/edit/UT5HydtxzyxkTIt5LBeZ?p=preview

$('.input').keyup(function (e) {
  if (this.value.length == this.maxLength) {
    var currId = $(this).attr('id');
    var nextId = '#input-' + (Number(currId.split('-')[1]) + 1);
    var next = $(nextId);
    //Check if there is a next input.
    if (next.length) {
      next.focus();
    } else {
      $(this).blur
      //AJAX CALL
    }
  }
}

Answer 2

我建议的解决方案是确定有多少元素与选择器匹配，然后使用最后一个元素上的每个元素.focus()的索引调用.blur()。您可能不想触发AJAX调用，除非您点击了maxLength，因此else if语句而不是else。

var selector = "#confirm-input .input";
$(selector).keyup(function (e) {

  var i = $(this).index(selector);
  var len = $(selector).length - 1;

  if (this.value.length == this.maxLength && i < len) {
    $(selector).eq(i+1).focus();
  }

  else if(this.value.length == this.maxLength && i === len) {
    $(this).blur();
    //AJAX CALL
  }

});

JS自动选择下一个输入并检测最后一个输入

2 个答案: