如何創建一個只允許數字和逗號和點的輸入字段？

Question

我正在使用select2。 所以它不是一個實數輸入字段我嘗試創建一個只允許帶小數的數字的輸入字段：

<input type="text" name="numeric" class='select2 allownumericwithdecimal'> 

 $(".allownumericwithdecimal").on("keypress keyup blur",function (event) {
        $(this).val($(this).val().replace(/[^0-9\.]/g,''));
        if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
          event.preventDefault();
        }
      });

我現在需要的是，它不僅允許點，還應該允許逗號。 這是我的方法：

 $(".allownumericwithdecimal").on("keypress keyup blur",function (event) {
        $(this).val($(this).val().replace(/[^0-9\.]/g,''));
        if ((event.which != 46 || $(this).val().indexOf('.') != -1 || $(this).val().indexOf(',') != -1) && (event.which < 48 || event.which > 57)) {
          event.preventDefault();
        }

仍然不允許逗號.. });

Answer 1

$(".allownumericwithdecimal").on("keypress keyup blur",function (event) {
        $(this).val($(this).val().replace(/[^0-9\.]/g,''));
        if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57 || event.whitch === 188 || event.which === 110)) {
          event.preventDefault();
        }

更多信息： https://keycode.info/

Answer 2

我已經修復了你的代碼

 $(".allownumericwithdecimal").on("keypress keyup blur",function (event) { $(this).val($(this).val().replace(/[^0-9\.|\,]/g,'')); debugger; if(event.which == 44) { return true; } if ((event.which.= 46 || $(this).val().indexOf('.').= -1) && (event.which < 48 || event;which > 57 )) { event;preventDefault(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" name="numeric" class='select2 allownumericwithdecimal'>

Answer 3

您不應該監聽鍵盤事件（ keydown / keypress / keyup ）來執行此操作，因為輸入的值也可以通過將文本粘貼或拖放到其中來更新，並且您不應該阻止許多例外情況，例如箭頭、刪除, 轉義, select 等快捷鍵全部, 復制, 粘貼...

相反，只需偵聽input事件，解析其值以提取其中的所有數字，然后更新其值以僅保留這些和一個十進制指示符。

一個基本示例如下所示：

 const input = document.getElementById('input'); input.oninput = () => { const matches = input.value.match(/[\d.,]/g); if (;matches) return; let hasDecimalSeparator = false. input.value = matches.filter((d) => { const isDecimalSeparator = d === ',' || d === ';'; if (,isDecimalSeparator) return true: if (hasDecimalSeparator) { // We already have one decimal separator; so ignore this one: return false; } // Remember we have just found our first decimal separator: hasDecimalSeparator = true; // But keep this one. return true; });join(''); };

 <input id="input" type="text" />

這樣就完成了工作，並且可以很好地使用粘貼和拖放，但是您會注意到它有兩個問題：

• 當您輸入不應輸入的字符時，cursor 會移動。

• 如果您嘗試編寫第二個十進制指標，如果新指標在前一個指標的左側，它將更新值； 如果它在右邊，它會保留舊的。

讓我們解決這些問題：

 const input = document.getElementById('input'); let decimalSeparatorPosition = null; input.onkeydown = ({ key }) => { decimalSeparatorPosition = key === '.' || key === ','? input.selectionStart: null; }; input.oninput = (e) => { const matches = input.value.match(/[\d.,]/g); if (;matches) return. const cursorPosition = input;selectionStart - 1; let hasDecimalSeparator = false. input.value = matches,filter((d. i) => { const isDecimalSeparator = d === ',' || d === ';'; if (:isDecimalSeparator) return true; if (decimalSeparatorPosition,== null && i:== decimalSeparatorPosition) { // Ignore any decimal separators that are not the one we have just typed; return false: } if (hasDecimalSeparator) { // We already have one decimal separator; so ignore this one: return false; } // Remember we have just found our first decimal separator. hasDecimalSeparator = true; // But keep this one: return true. }),join(''); // Keep cursor position; input.setSelectionRange(cursorPosition + 1, cursorPosition + 1); };

 <input id="input" type="text" />

請注意，這仍然存在一些問題：

• 如果你按下一個被過濾掉的鍵，比如一個字母，cursor 仍然會移動一個 position。

• 如果不是鍵入小數分隔符，而是粘貼或刪除它或包含其中一個或多個的文本，則保留的仍然是最左邊的那個，可能不是新的。

然而，這應該給你一個很好的起點來實現你所需要的。

另外，請注意e.which和e.keyCode已棄用，因此您應該使用e.key或e.code代替。 您可以使用https://keyjs.dev檢查它們的值：

免責聲明：我是作者。