javascript - 自动选择下一个输入字段并返回

Question

一旦输入，用户就无法返回更改他们的输入。

$("form").on("keyup change paste", function(e) {
  e.preventDefault();

  var a = $(this).find("input[type='text'].a");
  var b = $(this).find("input[type='text'].b");
  var c = $(this).find("input[type='text'].c");
  var d = $(this).find("input[type='text'].d");
  var e = $(this).find("input[type='text'].e");
  var f = $(this).find("input[type='text'].f");

  a.val(a.val().replace(/[^0-9]/g, ""));
  b.val(b.val().replace(/[^0-9]/g, ""));
  c.val(c.val().replace(/[^0-9]/g, ""));
  d.val(d.val().replace(/[^0-9]/g, ""));
  e.val(e.val().replace(/[^0-9]/g, ""));
  f.val(f.val().replace(/[^0-9]/g, ""));

  if (a.val().length == a.attr('maxlength')) {
    a.next("input").focus();
  }
  if (b.val().length == a.attr('maxlength')) {
    b.next("input").focus();
  }
  if (c.val().length == a.attr('maxlength')) {
    c.next().next("input").focus();
  }
  if (d.val().length == a.attr('maxlength')) {
    d.next("input").focus();
  }
  if (e.val().length == a.attr('maxlength')) {
    e.next("input").focus();
  }
  if (f.val().length == a.attr('maxlength')) {
    f.next("input").focus();
  }
});

input {
  width: 20px;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="code" action="*" method="post" autocomplete="off">
  <input type="text" name="code" maxlength="1" autocomplete="off" class="a">
  <input type="text" name="code" maxlength="1" autocomplete="off" class="b">
  <input type="text" name="code" maxlength="1" autocomplete="off" class="c">
  <span>—</span>
  <input type="text" name="code" maxlength="1" autocomplete="off" class="d">
  <input type="text" name="code" maxlength="1" autocomplete="off" class="e">
  <input type="text" name="code" maxlength="1" autocomplete="off" class="f last">
</form>

如何做到这一点？

上面有没有更优雅的方法？

---

直播:jsFiddle

Answer 1

每当您发现自己发现非常重复的代码时，请始终考虑 LOOP。

下面将允许用户编辑他们的值。它还大大减少了您的代码。

$('form').on('input', e => {
    var letters = ['a', 'b', 'c', 'd', 'e', 'f'];
    letters.forEach(letter => {
        let field = $(e.target);
        field.val(field.val().replace(/[^0-9]/g, ''));
        if(field.val().length == field.attr('maxlength')) { field.nextAll('input').first().focus(); }
    });
});

Fiddle .

注意事项:

• 监听输入事件；它的优点是涵盖了您正在监听的所有事件，而且最重要的是，它会在 按键后触发(这意味着您可以确保从该字段中获取最新、完整的值)
• 避免重复代码；循环允许我们一次编写业务逻辑而不是重复
• 无需阻止事件的默认操作
• 通过使用 nextAll('input').first()，我们可以确保获得下一个 input，无论它是下一个兄弟还是第三个输入的情况，由另一种类型的元素分隔