如何使用jquery在keyup上添加新值到div每n位？

Question

每次用戶輸入 3 位數字時，我都想自動列出數字。 輸入數字應自動出現在div 。

 $("#lister").on("keyup", function() { var mxlen = $(this).data("mxlen"); var input = $(this).val(); if (input.length == mxlen) { //if input==3 $('#num_list').append('<li>' + input + '</li>'); $(this).html(''); //clear input after appended } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="num_list"></div> <input type="number" id="lister" data-mxlen="3" />

我的代碼的問題在於它重復相同的數字，並且在追加后不清除輸入。

Answer 1

您的代碼就快完成了，您只需要使用val('')來重置該值。

另請注意，您可以通過使用slice(0, mxlen)在快速鍵入時將值限制為 3 個字符來使邏輯更加健壯，並且出於同樣的原因還將檢查從==更改為>= 。

 $("#lister").on("input", function() { let $el = $(this); var mxlen = $el.data("mxlen"); var input = $el.val(); if (input.length >= mxlen) { $('#num_list').append('<li>' + input.slice(0, mxlen) + '</li>'); $el.val(''); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="num_list"></div> <input type="number" id="lister" data-mxlen="3" />

最后要注意的一件事是，諸如-或e類的字符對於type="number"輸入字段中的條目是有效的，但是它們對於從該字段返回的值無效。 因此，當使用這些字符時， length檢查將得到不一致的輸出。

根據您的用例，您最好使用標准type="text"檢查並手動將輸入限制為數值。