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

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(); }
    });
});

小提琴。

笔记：

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

Answer 2

我的想法是下一个焦点，并在到达最后一个时循环。 如果有新条目，请替换编号。

 // init the html const nbInput = 6; let html = ''; for (let i = 0; i < nbInput; i += 1) { html += `<input type="text" name="code" maxlength="1" autocomplete="off" number="${i}">`; } $('form').html(html); $('form input').on('keypress', function(e) { e.preventDefault(); // Ignore bad values if (/^[^0-9]$/g.test(String.fromCharCode(e.which))) { return; } // Replace the actual value with the keypressed one $(this).val(String.fromCharCode(e.which)); // Reset & focus next if ($(this).val() !== '' && Number($(this).attr('number')) < (nbInput - 1)) { $(`input[number=${Number($(this).attr('number')) + 1}]`).focus(); } else { // Focus the first item when we finished $('input[number="0"]').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"> </form>

Answer 3

清除焦点上的输入就可以了。 （我不经常使用 jQuery，所以如果我有任何不正确的语法，请道歉。）

$("form").focus(function() {

    var a = $(this).find("input[type='text'].a")
    var b = $(this).find("input[type='text'].b") // ...etc  

    a.val("");
    b.val(""); // ...etc
});

也就是说，Utkanos 100% 正确，循环是处理这两个问题（自动推进和允许编辑）的正确方法。