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
Settimeout() Inside JavaScript Class Using "This"
What Are Closures and Callbacks
How to Remove Leading and Trailing White Spaces from a Given HTML String
Convert Nan to 0 in JavaScript
How to Create a Simple Http Proxy in Node.Js
How to JSON Stringify a JavaScript Date and Preserve Timezone
How to Stop All Timeouts and Intervals Using JavaScript
Jquery: How to Get the Event Object in an Event Handler Function Without Passing It as an Argument
Preventing Click Event with Jquery Drag and Drop
Jquery Ajax Requests Are Getting Cancelled Without Being Sent
Typescript Compile to Single File
Difference Between the JavaScript String Type and String Object
Find All Text Nodes in HTML Page
Can't Trigger Click with Jquery in a Chrome Extension
How to Detect Timeout on an Ajax (Xmlhttprequest) Call in the Browser