How to allow only numbers in a texbox but also allow entry with French keyboard

Question

I have the following code to allow only numbers to be entered (other logic is removed for brevity).

$("input").keydown(function (event) {
     var key = event.keyCode;
     if ((key < 48 || key > 57) && (key < 96 || key > 105) || event.shiftKey) {
         event.preventDefault();
     }
});

This code works fine in English keyboards but on French keyboards the shift key is used so the logic fails there. If i remove the shift the logic fails in english keyboards.

Is there a way to detect a number is being pressed in the keydown event that will work on any type of keyboard?

Thanks

Perhaps you can find out what type of [**keyboard/locale they are using**](http://stackoverflow.com/questions/2678230/how-to-getting-browser-current-locale-preference-using-javascript)? — crush, Sep 12 '13 at 21:14
There probably is, just console.log the keys and figure out what keyCodes to exclude/include. — adeneo, Sep 12 '13 at 21:14
If this is how you are going to validate input, be sure to also catch the case of using a mouse to copy/paste a value in — bengoesboom, Sep 12 '13 at 21:15
Or perhaps use the `fromCharCode()` to see if the keycode is a number, or use a HTML5 number input ? — adeneo, Sep 12 '13 at 21:15
@adeneo True. Instead of checking the key, check the value it is appending. — crush, Sep 12 '13 at 21:16

score 1 · Answer 1 · edited May 23 '17 at 11:44

1

Use a custom function to check if the value of the keydown is numeric. From this previous answer (Validate decimal numbers in JavaScript - IsNumeric()):

function isNumber(n) 
{
  return !isNaN(parseFloat(n)) && isFinite(n);
}

And your handler UPDATED:

 $("input").keydown(function (event) {
    var code = event.keyCode;

     //Allows left and right arrows, backspace, and delete
     if(code == 37 || code == 39 || code == 8 || code == 46)
        return;

     var character = String.fromCharCode(code);
     if(event.shiftKey || !isNumber(character)){
         event.preventDefault();
     }
 });

edited May 23 '17 at 11:44

Community

1
1

answered Sep 12 '13 at 21:20

Mister Epic

16,295
13
76
147

I'm also using a french layout keyboard (Belgian azerty). Strangely enough, this allows for me to enter special characters located on my number keys. Should probably also add a check for backspace somewhere in there :) – Kippie Sep 12 '13 at 21:26
Which special character is passing the isNumber function? – Mister Epic Sep 12 '13 at 21:44
``String.fromCharCode(event.keyCode)`` returns ``4`` even though the resulted character in the textbox is ``'`` – Kippie Sep 12 '13 at 21:55
1

This has the same problem of allowing shift + numeric characters. (for example shift+1 will show ! on English keyboards) – Tim Sep 13 '13 at 12:47

score 1 · Answer 2 · answered Apr 10 '19 at 16:06

I have found that event.key works better than event.keyCode. The event handler needs to be onkeydown for it to work properly. The check for whether it's a number needs to come first. Here's my code. Tested to work on IE11, Edge, Chrome, and Firefox.

$("input").keydown(function (event) {
  var code = event.keyCode;
  var key = event.key;

  if (!isNaN(Number(key)))
    return;

  // allow backspace, delete, left & right arrows, home, end keys
  if (code == 8 || code == 46 || code == 37 || code == 39 || code == 36 || code == 35) {
    return;
  } else {
    evt.preventDefault();
  }
});

Luis Pinto · Answer 3 · 2019-09-13T15:22:51.107

@HostListener('keydown', ['$event']) onKeyDown(event) {    
      if ((e.keyCode < 48 || e.keyCode > 57) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
      } else if (!this.isNumber(e.key)) {//For french keyboard 
        e.preventDefault();
      }
    }
  }


  isNumber(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
  }

I had a similar problem because of 2 different keyboards. And I solve that by checking if is not a number in the key value instead of the keyCode value.

score 0 · Answer 4 · answered Sep 12 '13 at 21:19

0

Would this work?

$("input").bind("propertychange input textInput", function() {
  this.value = this.value.replace(/[^\d.]/g, "");
});

Of course, this trims the value after the input event, so I'm not sure if that's what you want

answered Sep 12 '13 at 21:19

Kippie

3,760
3
23
38

Ideally i wanted to block the input not show the character and trim it out after.. – Tim Sep 13 '13 at 12:48

How to allow only numbers in a texbox but also allow entry with French keyboard

4 Answers4