4

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

Improve this question
1
  • Just use input event instead of keypress event, that takes care of all possible entering methods, including dropping and pasting. That would need a bit different approach to modify an illegal value, though. Commented Jun 7, 2018 at 7:47

4 Answers 4

Reset to default
4

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

Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

I can not use jquery I have to use pure js that's what the client said :(
Thanks Priyal Pithadiya for your response again and ok
Sorry about this but how can I do this with a .addEventListener('paste' instead of onpaste="myFunction(this);" I know that's strange but he likes the code to make use of addEventListener there's a reason why for that which he said is personal just saying I tried to use something like that in the input tag and he said you must make use of addEventListeners in this project. I tried to edit your code with an event listener triggering myFunction
Priyal Pithadiya I sent him the code and I knew he was going to say something about what I said he said that myFunction must be triggered by an event listener for this project I tried to convince him but he said you can not use onpaste="myFunction(this);" for this project I know it's strange but change it where it is trigger by an event Listener instead so what I'm I doing wrong now this is what i'm doing document.querySelector('#numbers-only').addEventListener('paste',myFunction); but it is not working with a event listener.
told them to refer this link
|
3

in-line js:

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

Improve this answer

Comments

0

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, '');
}
Improve this answer

3 Comments

FewFlyBy thanks for your response but the code example did not work it acted like a solution was never provided :(. it still lets me paste letters.
can you share your fiddle link?
No it is not working :( is there suppose to be a var before let input?
0

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.