JavaScript-僅允許粘貼粘貼數字，而不使用jQuery

Question

我有這個腳本，只允許輸入數字，並且一切正常，但是如果用戶決定在輸入中使用粘貼，我希望僅粘貼數字。

我所指的粘貼是mouse paste和keyboard paste 。 粘貼一般。 我試圖弄清楚這一點，但似乎無法找到一種方法。

這是我的代碼。

 //Prevent non numbers from keypress document.querySelector('#numbers-only').addEventListener('keypress',preventNonNumbersInInput); function preventNonNumbersInInput(event){ var characters = String.fromCharCode(event.which); if(!(/[0-9]/.test(characters))){ event.preventDefault(); } } //Prevent non numbers from being pasted only numbers can be pasted document.querySelector('#numbers-only').addEventListener('paste',pasteTest); function pasteTest(){ //??? } 

 <input type="text" id='numbers-only'> 

Answer 1

干得好。

您可以創建一個invalid chars列表，以防止keydown即粘貼。

下面是工作代碼：

 var input = document.getElementById("numbers-only"); var invalidChars = [ "-", "+", "e", "." ]; input.addEventListener("input", function() { this.value = this.value.replace(/[e\\+\\-]/gi, ""); }); input.addEventListener("keydown", function(e) { if (invalidChars.includes(e.key) || e.which === 38 || e.which === 40) { e.preventDefault(); } }); 

 input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } 

 <input type="number" id="numbers-only" /> 

Answer 2

由於它是輸入，因此您可以輕松地將che輸入類型更改為數字。 然后，網絡瀏覽器將只允許輸入數字。

<input type="number" id='phone-number'>