Question

在你进一步阅读之前，请看看我的答案和Priyal Pithadiya关于如何做到这两种方法的答案。

我有一个客户对我昨天在这里回答的解决方案不满意。基本上我有这个脚本可以防止在input中插入非数字字符。键入时效果很好但我在这里遇到问题我无法弄清楚如何防止非数字被粘贴。

我的客户已表示他希望避免使用input number，因为这是此处提供的解决方案，但出于个人原因，他说他需要使用input text。

如果我必须更改我的代码以获得这样的结果，我会。

请注意，我不能使用jQuery，我的解决方案必须只是javascript。

这是我的代码：

＆＃13;

//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(){
  //???
}

＆＃13;

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

＆＃13;

Answer 1

@尝试使用给定的解决方案，

＆＃13;

  document.querySelector('#numbers-only').addEventListener('keypress',preventNonNumbersInInput);
	  function preventNonNumbersInInput(event){
		var characters = String.fromCharCode(event.which);
		if(!(/[0-9]/.test(characters))){
			event.preventDefault();
		}
	  }
	  
	  document.querySelector('#numbers-only').addEventListener('paste',pasteTest);
	  function pasteTest(event){
	   window.setTimeout(() => {
		 var characters =event.target.value;
		 window.setTimeout(() => {
			if(!(/^\d+$/.test(characters))){
				event.target.value = event.target.value.replace(/\D/g, '');
			 }
		 });
	   });
	  }

＆＃13;

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

＆＃13;

Answer 2

感谢Priyal Pithadiya的帮助我想发布两个版本的Priyal Pithadiya早期和现在的例子，其中包括两个版本，一个是

一个onpaste示例，另一个是基于使用addEventListener粘贴，这是为了读取这个的未来读者。所有功劳归功于Priyal Pithadiya。

使用onpaste

 document.querySelector('#numbers-only').addEventListener('keypress',preventNonNumbersInInput);
  function preventNonNumbersInInput(event){
    var characters = String.fromCharCode(event.which);
    if(!(/[0-9]/.test(characters))){
        event.preventDefault();
    }
  }
  function myFunction(e) {
        var el = e;
        setTimeout(function() {
            el.value = el.value.replace(/\D/g, '');
        }, 0);
    }

<input type="text" id="numbers-only" onpaste="myFunction(this);" >

使用事件监听器

  document.querySelector('#numbers-only').addEventListener('keypress',preventNonNumbersInInput);
	  function preventNonNumbersInInput(event){
		var characters = String.fromCharCode(event.which);
		if(!(/[0-9]/.test(characters))){
			event.preventDefault();
		}
	  }
	  
	  document.querySelector('#numbers-only').addEventListener('paste',pasteTest);
	  function pasteTest(event){
	   window.setTimeout(() => {
		 var characters =event.target.value;
		 window.setTimeout(() => {
			if(!(/^\d+$/.test(characters))){
				event.target.value = event.target.value.replace(/\D/g, '');
			 }
		 });
	   });
	  }

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

Answer 3

如果需要，您可以使用onpaste事件。

<input type="text" id='numbers-only' onchange="removeChars()">

function removeChars() {
  var input = document.getElementById('numbers-only');
  input.value = input.value.replace(/[^0-9]/g, '');
}

仅允许粘贴数字而不使用纯JavaScript中的输入数字

3 个答案: