Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Allowing only numbers from paste without using input number in pure JavaScript

Tags:

javascript

Before you read furtherly, look at my answer and Priyal Pithadiya answer for two different methods on how you can do this.

I have a client that is not satisfied with the solution I got from yesterdays answer on here. Basically I have this script that prevents non number characters from being inserted in an input. It works perfectly when you type but I have a problem here I cannot figure out how to prevent non numbers from being pasted in.

My client has stated that he want to avoid using input number since that was the solution that was offered here but for personal reasons he said he needs to use input text.

If I have to change my code to get a result like this I will.

Please note, I cannot use jQuery, my solution must be javascript only.

This is my code:

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

1 Answers

@ try with given solution ,

  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"  >
like image 140
Priyal Pithadiya Avatar answered Oct 27 '25 08:10

Priyal Pithadiya



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!