自動選擇下一個輸入字段並返回

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% 正確，循環是處理這兩個問題（自動推進和允許編輯）的正確方法。