javascript - 禁用输入字段填充 1 个字符时自动跳转到下一个输入字段

Question

你好 friend 我想在填充 4 个字符但 1 个字符时自动切换到下一个输入字段，并且如果有一个禁用的输入字段传递到下一个启用

你怎么回答这些问题？ Auto tab to next input field when fill 4 characters

<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" disabled="disabled" />
<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" disabled="disabled"  />
<input class="inputs" type="text" maxlength="1" />



$(".inputs").keyup(function () {
   if (this.value.length == this.maxLength) {
     $(this).next('.inputs').focus();
   }
});

Answer 1

使用nextAll()方法( next() 方法不能使用，因为它只选择直接相邻的兄弟)与 :enabled (只获取启用的输入)和 :first (获得第一个或最近的一个)伪类选择器。

$(".inputs").keyup(function () {
   if (this.value.length == this.maxLength) {
     $(this).nextAll('.inputs:enabled:first').focus();
   }
});

$(".inputs").keyup(function() {
  if (this.value.length == this.maxLength) {
    $(this).nextAll('.inputs:enabled:first').focus();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" disabled="disabled" />
<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" disabled="disabled" />
<input class="inputs" type="text" maxlength="1" />