2

I have this script that only allow numbers to be typed in and everything works great but I want to be able to paste only numbers if the user decides to use paste in an input.

The paste i'm referring to is mouse paste and keyboard paste. Paste in general. I tried to figure this out but I can not seem to find a way to do this.

Here 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
  • Francescos answer solves your problem - anything pasted into a number only input will have the rest removed or nothing will paste or a lower case e will paste for error Commented Jun 7, 2018 at 0:31

2 Answers 2

Reset to default
2

Here you go.

You can create a list of invalid chars to prevent on keydown i.e. paste.

Below is working code:

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

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

6 Comments

Thanks for your advice VicJordan but how can I avoid using the number input it's because I find those arrows annoying? The arrows that you use to change digits and how can I avoid using the arrows on the keyboard from change the digits.
@fsofb updated answer. Check it now! You can hide it using CSS
How can I also prevent the keyboard arrows from changing the digits in the input in other words I notice when I press the keyboard arrows it changes the digits.
@fsofb Updated answer for disable keyboard arrows as well. Check it out!
Thanks vicJordan for your effort in trying to teach me by example It is how I want it actually this is for my client my client wanted this to be done with a text input rather than a number input if he don't approve of it i'm afraid I might have to ask this again under perhaps the same title with out using the number input but I will grant you as the best answer thank you.
|
1

Since it is an input you can easly change che input type to number. The web browser will then take care of allowing only numbers.

<input type="number" id='phone-number'>
Improve this answer

5 Comments

It still allows non-numbers in so your suggestion did not work for me. Is it possible to do this with the paste event?
It's strange when I do paste something it paste e or e's
@fsofb check out my answer.
This is because e is used to define numbers in scientific notion or 10^2 <=> 10e2
Thanks for the advice but how can I avoid using the number input it's because I find those arrows annoying? The arrows that you use to change digits and how can I avoid using the arrows on the keyboard from change the digits.

Your Answer

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