Prevent Typing Non-Numeric in Input Type Number

Prevent typing non-numeric in input type number

Try preventing the default behaviour if you don't like the incoming key value:

document.querySelector("input").addEventListener("keypress", function (evt) {
    if (evt.which < 48 || evt.which > 57)
    {
        evt.preventDefault();
    }
});

Preventing users from entering non-digits in input text field with HTML5

So you can totally do that by adding type="number" to your input field, It'll work in most browsers.

I'd recommend using sort of regex and a bit of JS to evaluate the input and then replace the input with permitted characters.

var phone_input = document.getElementById('contact_phone');

function validDigits(n){
  return n.replace(/[^0-9]+/g, '');
}

phone_input.addEventListener('keyup', function(){
  var field = phone_input.value;
  phone_input.value = validDigits(field);
});

Here's a quick codepen

I'd also put a bit of validation on the model, just in case someone bypasses the JS.

Prevent user from typing non-number input

I'd approach this simpler and in a way that is guaranteed to catch more possible forms of input (e.g. copy-paste):

<input type="number" ng-model="myNumber">

$scope.$watch('myNumber', function (input) {
    $scope.myNumber = input.replace(/\D/g, '');
});

Prevent non-digits from being typed into the input in Blazor

The Unreliable Solution:

Here's why @enet's proposed solution, is in fact highly unreliable, flawed, inefficient, and naive. + Why his claims that my solution is problematic are actually false.

Update: He deleted his answer.

First, reasons why his solution is inelegant:

Reason 1: Can't prevent copy-paste via shortcut keys (Ctrl/CMD + V)

No comment:

Reason 2: Can't prevent copy-paste via the context menu (Right-click => Paste)

No comment:

Reason 3: Can't prevent drag-and-drop of text

No comment:

Reason 4: Works only for English digits

No comment:

Reason 5: The middle of the text is uneditable (IMPORTANT!)

No comment:

Note: You could see all of these behaviors for yourself in this fiddle: https://blazorfiddle.com/s/xfik4hnq

Reason 6: Uses RegEx

RegEx is slow, inefficient, and often hard-to-read and parse. It should therefore be avoided wherever possible.

Reason 7: Much more complex and less elegant

Seriously, no comment, pretty obvious.

Reason 8: Requires more lines of code

Considering only the @code section, this solution, as presented by @enet, is about 23 lines of code, while mine, is about 12. (Both considering the curly braces on a line, etc.)

Note: It's also crucial to keep in mind that if this solution were to be even nearly as robust as the one I initially proposed (I'll explain that in just a bit), it would have to solve every single one of the problems that were just demonstrated, and in order to do so, it has to become much more complex than it already is, and it would require many more lines of code as well.

The Optimal Solution:

Here's why the solution that I initially proposed in my original question is the most optimal and elegant solution;

Solves ALL of the aforementioned problems, and it also does so in fewer lines of code + code that's easier-to-understand, shorter, nicer, and simpler.

Meanwhile, the only argument presented from the other side, in favor of the other solution, and against mine, was that my solution causes the disallowed characters to show up a fraction of a second, and then disappear. However, this was not observed at all in any of my tests.

Here's a GIF that demonstrates this:

Whenever I press a key on the keyboard, you can see on the console that a message like "Key pressed: a" is shown, but at the same time, you see that that character doesn't appear at all in the input:

---

Related Topics