CODEWITHSUNDEEP
javascript
user9375528
user9375528

Reputation:

Allowing only numbers from paste without using input number in pure 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'>

Upvotes: 3

Views: 6788

Answers (4)

celsowm
celsowm

Reputation: 404

in-line js:

<input type="text" pattern="\d{1,}" onkeyup="this.value = this.value.replace(/[^0-9]/g, '')" />

Upvotes: 3

user9375528
user9375528

Reputation:

Thanks Priyal Pithadiya for your help I will like to post two versions of Priyal Pithadiya examples from earlier and now which includes two versions one is with

a onpaste example and the other one is based on using an addEventListener by paste this is for any future readers reading this. All credit goes to Priyal Pithadiya.

With 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);" >

With a event listener

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

Upvotes: 0

Priyal Pithadiya
Priyal Pithadiya

Reputation: 889

@ 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"  >

Upvotes: 4

wobsoriano
wobsoriano

Reputation: 13442

You can use onpaste Event if you want.

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

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

Upvotes: 0

Related Questions