Get Correct keyCode for keypad(numpad) keys
Solution 1
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)
)
Solution 2
I fixed the issue using following javascript code. The numpad keys lie between 96
to 105
. but the real numbers are less 48
from the numpad values. Works with keyup or keydown handler.
var keyCode = e.keyCode || e.which;
if (keyCode >= 96 && keyCode <= 105) {
// Numpad keys
keyCode -= 48;
}
var number = String.fromCharCode(keyCode);
Solution 3
There is a way to do this with keydown, if keypress is not workable due to event canceling needs, etc. Use an if() statement with this test:
parseInt(event.keyIdentifier.substring(2),16) > 47 && parseInt(event.keyIdentifier.substring(2),16) < 58
OR, with jQuery events:
parseInt(event.originalEvent.keyIdentifier.substring(2),16) > 47 && parseInt(event.originalEvent.keyIdentifier.substring(2),16) < 58
These examples assume "event" is the keydown event. keyIdentifier is a hexidecimal number that represents the unicode value for the related char. Using keyIdentifier, numbers from the numberpad / keypad AND the numbers above your QWERTY keyboard will all have the same values, 48 - 57 (U+0030 - U+0039), even with the keyDown event.
Unicode values in the browsers will look like U+0030 or U+002F. Parse this string to only get the hexidecimal value, then use parseInt() with a radix of 16 to convert it to base-10.
Solution 4
Ok. But In Firfox Gecko It doesn't work. I use bellow code and I'm happy with it :)
[somelement].onkeypress = function(e){
var singleChar=e.key || String.fromCharCode(e.keyCode);
console.log(singleChar);
}
Related videos on Youtube
AEMLoviji
Web developer: - C#, Asp.NET MVC - MS SQL Server, T-SQL - Oracle, PL/SQL - Java/Spring
Updated on September 21, 2020Comments
-
AEMLoviji about 3 years
I'm getting codes [96..105] by calling
String.fromCharCode(event.keyCode)
when pressing keys [0..9](digits) on the keypad. Though these codes correspond to characters: 'a b c d e f g h i' instead of [0..9].Question:
I have 3 inputs in the form. User allowed to enter only in the 1-st input. While user press keys on keyboard some function need to filter it and write it to 2-nd input if pressed key is digit otherwise it must write it to the 3-rd input. How it can be corrected?
-
Konerak over 12 yearsI'm getting values between 48 and 57, using your code and Opera as browser.
-
-
AEMLoviji over 12 yearswhat does it means e=e || event ?
-
KooiInc over 12 yearsIn most browsers the key event is sent to the handler. Not so in Internet Explorer. The line means: take the given event e from the arguments of the handler function, and if that's false or null, use the event of the global object (ie
window
). -
AEMLoviji over 12 years+1 to your comment :-) . And your code works greate. but little problem. i will send it after five seconds.
-
Benny Bottema over 8 yearsWhy the hell are different keyCodes being used based on the event that was triggered. I'm using the same key on my keyboard!
-
awj almost 8 yearsWorks great, but only in Chrome (not in FF, IE or Edge - not sure about Safari).
keyIdentifier
was only ever in a draft spec and has since been deprecated (developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/…). -
JoeTidee over 6 yearsGood solution because
backspace
doesn't get picked up using keypress.