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'>