Keycode Values for Numeric Keypad

keyCode values for numeric keypad?

The keycodes are different. Keypad 0-9 is Keycode 96 to 105

Your if statement should be:

if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 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 >= 48 && e.key <= 57) || (e.key >= 96 && e.key <= 105)) { 
// 0-9 only
}

Here's an output tester for event.key, thanks to @Danziger for the link.

Keycodes for the Numeric Keypad

The Javascript Keycodes differ from the ASCII codes (called Character Codes in javascript) sadly, because ASCII doesn't differentiate between a 1 from the top of the keyboard and a 1 from the number pad - they are the same character. Likewise the javascript key codes don't differentate between a capital and lowercase letter, because they are the same key...

The ASCII codes are shown here: http://www.asciitable.com/index/asciifull.gif

and the Javascript key codes here: https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

This page (https://www.w3schools.com/jsref/event_key_keycode.asp) describes the difference;

The difference between the two code types:

Character codes - A number which represents an ASCII character

Key codes - A number which represents an actual key on the keyboard

These types do not always mean the same thing; for example, a lower case "w"
and an upper case "W" have the same keyboard code, because the key
that is pressed on the keyboard is the same (just "W" = the number
"87"), but a different character code because the resulting character
is different (either "w" or "W", which is "119" or "87") - See "More
Examples" below to better understand it.

Get Correct keyCode for keypad(numpad) keys

Use the keypress handler:

[somelement].onkeypress = function(e){
e = e || event;
console.log(String.fromCharCode(e.keyCode));
}

See also: this W3C testdocument

if you want to use the keyup or keydown handler, you can subtract 48 from e.keyCode to get the number (so String.fromCharCode(e.keyCode-48))

Capturing number pad numeric key strokes

keyCode 8 = backspace

keyCode 144 = num lock

keyCode 48 to 57 = 0 to 9

keyCode 96 to 105 = 0 to 9 in numpad

but for me this is completly wrong :

onkeydown="return (event.keyCode=8 && event.keyCode=144 && (event.keyCode>=48 && event.keyCode<=57));"

maybe something like that :

onkeydown="return ((event.keyCode>=48 && event.keyCode<=57) || (event.keyCode>=96 && event.keyCode<=105));"

Event keyCode different for Numeric value

When a keyboard event is triggered in JavaScript, the event.keyCode contains the keycode of the key that was pressed. It just so happens that there are two different constants for the numerical keypad and the standard location numbers.

From the MDN reference, the following constants are defined:

DOM_VK_1 = 0x31 (49) and DOM_VK_NUMPAD1 = 0x61 (97)

Thus, the keyCode may very well be different, depending on which physical key was pressed, whether the regular 1 or the numeric keypad 1.

Detect decimal (dot) key from numeric keypad

Your code doesn't do anything on my end, so I'd say it probably does depend on keyboard layout. A quick check confirms that the output on my finnish qwerty keyboard is keycode 44, instead of the expected 46.

Mootools: numpad keyup and keydown events returns different key values on the same key

There is a big mess in how different browsers implement keydown, keypress and keyup events, even the keyCode values in keydown and keyup events are not yet standardized across browsers.

Currently the event object has three properties that contain information about the pressed key:

  • charCode - the Unicode value of a character key pressed
  • keyCode - a number representing the key that user pressed
  • which - the keyCode or charCode number for an alphanumeric key pressed

The value of pressed key is stored in either keyCode or charCode property, but never both, keyCode is always set in the keydown and keyup events, charCode is set in the keypress event.

So, for example, if you press 'e':

  • keydown and keyup reports:
    • charCode=0, keyCode=69, which=69 - caracter at number 69 is capital letter E
  • keypress reports:
    • charCode=101, keyCode=0, which=101 - caracter at number 101 is small letter e

And if you press number 9 in numpad:

  • keydown and keyup reports:
    • charCode=0, keyCode=105, which=105 - caracter at number 105 is small letter i
  • keypress reports:
    • charCode=57, keyCode=0, which=57 - caracter at number 57 is digit 9

Mootools

Mootools tries to standardise things by adding event.code and event.key properties:

event.code = event.which || event.keyCode;
event.key = String.fromCharCode(code).toLowerCase();

It also converts keyCodes for the numbers on the numpad, but only for keydown event ( version 1.4.5 ), and not for keyup. I don't know if this is intentionally or not, but keyup event can be easily modified to have the same behaviour by replacing the line 1163 in mootools-core-1.4.5-full-nocompat.js from:

if (type == 'keydown') {

to:

if (type == 'keydown' || type == 'keyup') {

That way keyCodes in keyup event will be also converted.



Interestingly, the Mozilla Developer Network says:

'charCode', 'keyCode' and 'which' is deprecated, you should use 'char' or 'key' instead, if available.

But I don't see that implementation in Firefox or Chrome yet. And jQuery adds ‘key’ property to an event object, but it is always 'undefined' ( probably depends on browser implementation ).

How to differentiate between 'Enter' and 'Return' keys in Javascript?

See Jan Wolters’ treatise on Javascript Madness: Keyboard Events.

Enter and Numpad Enter both give the same keycode, i.e. 13, because browsers do not differentiate between the two keys. To be honest, nor do most environments. It is possible to differentiate between them using the Windows API (for example), but it does take extra effort to do so. This, however, falls outside the scope of the browser’s abstraction.

UPDATE

As Bill Thorne rightfully mentions, the KeyboardEvent object sports a location property nowadays.

From the Mozilla Developer Network:

Possible values are:

DOM_KEY_LOCATION_STANDARD 0 The key has
only one version, or can't be distinguished between the left and right
versions of the key, and was not pressed on the numeric keypad or a
key that is considered to be part of the keypad.

DOM_KEY_LOCATION_LEFT 1 The key was the left-hand version of the key;
for example, the left-hand Control key was pressed on a standard 101
key US keyboard. This value is only used for keys that have more that
one possible location on the keyboard.

DOM_KEY_LOCATION_RIGHT 2 The
key was the right-hand version of the key; for example, the right-hand
Control key is pressed on a standard 101 key US keyboard. This value
is only used for keys that have more that one possible location on the
keyboard.

DOM_KEY_LOCATION_NUMPAD 3 The key was on the numeric
keypad, or has a virtual key code that corresponds to the numeric
keypad.

Note: When NumLock is locked, Gecko always returns
DOM_KEY_LOCATION_NUMPAD for the keys on the numeric pad. Otherwise,
when NumLock is unlocked and the keyboard actually has a numeric
keypad, Gecko always returns DOM_KEY_LOCATION_NUMPAD too. On the other
hand, if the keyboard doesn't have a keypad, such as on a notebook
computer, some keys become Numpad only when NumLock is locked. When
such keys fires key events, the location attribute value depends on
the key. That is, it must not be DOM_KEY_LOCATION_NUMPAD. Note:
NumLock key's key events indicate DOM_KEY_LOCATION_STANDARD both on
Gecko and Internet Explorer.



Related Topics



Leave a reply



Submit