keyCode values for numeric keypad

Question

Do the numbers on a numeric keypad have a different keycode than the numbers at the top of a keyboard   Here is some JavaScript that is supposed to run on the keyup event  but only if the keycode is between 48 and 57  Here is the code       rollNum   keyup function e        if e keyCode  gt   48  amp  amp  e keyCode  lt   57      0-9 only         var max   15          var textLen     this  val   length          var textLeft   max - textLen                   My problem is that this code only runs in response to the numbers entered at the top of the keyboard  but does not run in response to numbers entered from the numeric keypad   I m thinking the answer must be that the numeric keypad has different keyCode values  but how do I find out what those are

User · Answer

You can simply run    document  keyup function e        console log e keyCode         to see the codes of pressed keys in the browser console   Or you can find key codes here  https   developer mozilla org en-US docs Web API KeyboardEvent keyCode Numpad keys

User · Answer

keyCode is different for numbers on numeric keypad and numbers on top of keyboard    keyCodes    numbers on top of keyboard   0 - 9     48 - 57 numbers on numeric keypad    0 - 9     96 - 105  JavaScript condition     if  e keyCode  gt   48  amp  amp  e keyCode  lt  57      e keyCode  gt   96  amp  amp  e keyCode  lt  105             entered key is a number     Reference for all keycodes   with demo     http   www codeforeach com javascript keycode-for-each-key-and-usage-with-demo

User · Answer

The keycodes are different  Keypad 0-9 is Keycode 96 to 105 Your if statement should be  if   e keyCode  gt   48  amp  amp  e keyCode  lt   57      e keyCode  gt   96  amp  amp  e keyCode  lt   105           0-9 only    Here s a reference guide for keycodes  -- UPDATE -- This is an old answer and keyCode has been deprecated  There are now alternative methods to achieve this  such as using key  if   e key  gt   48  amp  amp  e key  lt   57      e key  gt   96  amp  amp  e key  lt   105           0-9 only    Here s an output tester for event key  thanks to  Danziger for the link

User · Answer

Docs says the order of events related to the onkeyxxx event    onkeydown onkeypress onkeyup   If you use like below code  it fits with also backspace and enter user interactions  After you can do what you want in onKeyPress or onKeyUp events  Code block trigger event preventDefault function if the value is not number backspace or enter   onInputKeyDown   event   gt        const   keyCode     event      if          keyCode  gt   48  amp  amp  keyCode  lt   57            keyCode  gt   96  amp  amp  keyCode  lt   105           keyCode     8      Backspace key       keyCode     13     Enter key               else         event preventDefault

User · Answer

Little bit cleared  A Morel s answer  You might beware of keyboard language layout  Some keyboard layouts changed default numeric keys to symbols  let key   parseInt e key  if  isNaN key       console log  quot is not numeric quot     else     console log  quot is numeric quot

User · Answer

The answer by   A  Morel I find to be the best easy to understand solution with a small footprint  Just wanted to add on top if you want a smaller code amount this solution which is a modification of Morel works well for not allowing letters of any sort including inputs notorious  e  character   function InputTypeNumberDissallowAllCharactersExceptNumeric       let key   Number inputEvent key     return  isNaN key

User · Answer

Yes  they are different and while many people have made a great suggestion of using console log to see for yourself  However  I didn t see anyone mention event location that you can use that to determine if the number is coming from the keypad event location     3 vs the top of the main keyboard   general keys event location     0   This approach would be best suited for when you need to generally determine if keystrokes are coming from a region of the keyboard or not  event key is likely better for the specific keys

User · Answer

Don t use KEYCODE                          The problem with keyCode is to avoid the combined keys with the numbers on top of keyboard  we must add a check on the key  Shift  and  Alt  to avoid special characters such as e    amp             A simplest solution is to convert e key to a number and check if the conversion gives NaN   let key   Number e key  if  isNaN key     e key     null    e key              console log  is not numeric     else     console log  is numeric       Be careful if e key is null or a space  it gives 0    Number 5               gt  5 Number  5              gt  5 Number null            gt  0  Number                 gt  0 Number  chars          gt  NaN Number undefined       gt  NaN

User · Answer

To add to some of the other answers  note that    keyup and keydown differ from keypress if you want to use String fromCharCode   to get the actual digit from keyup  you ll need to first normalize the keyCode    Below is a self-documenting example that determines if the key is numeric  along with which number it is  example uses the range function from lodash    const isKeypad   range 96  106  includes keyCode   const normalizedKeyCode   isKeypad   keyCode - 48   keyCode  const isDigit   range 48  58  includes normalizedKeyCode   const digit   String fromCharCode normalizedKeyCode

User · Answer

You can use this to figure out keyCodes easily     document  keyup function e           Displays the keycode of the last pressed key in the body       document body  html e keyCode         http   jsfiddle net vecvc4fr

User · Answer

You can use the key code page in order to find the       event code   to diference the number keyboard   https   keycode info   function getNumberFromKeyEvent event       if  event code indexOf  Numpad       0          var number   parseInt event code replace  Numpad        10         if  number  gt   0  amp  amp  number  lt   9                  numbers from numeric keyboard

User · Answer

For the people that want a CTRL C  CTRL-V solution  here you go                  Retrieves the number that was pressed on the keyboard                 param  Event  event The keypress event containing the keyCode          returns  number null  a number between 0-9 that was pressed  Returns null if there was no numeric key pressed              function getNumberFromKeyEvent event            if  event keyCode  gt   96  amp  amp  event keyCode  lt   105                return event keyCode - 96            else if  event keyCode  gt   48  amp  amp  event keyCode  lt   57                return event keyCode - 48                    return null          It uses the logic of the first answer

[javascript] keyCode values for numeric keypad?

Examples related to javascript

Examples related to jquery

Examples related to web-applications

Examples related to numeric-keypad