Get Correct keyCode for keypad(numpad) keys

48,130

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);
}
Share:
48,130

Related videos on Youtube

AEMLoviji
Author by

AEMLoviji

Web developer: - C#, Asp.NET MVC - MS SQL Server, T-SQL - Oracle, PL/SQL - Java/Spring

Updated on September 21, 2020

Comments

  • AEMLoviji
    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?

    My implementation in JSFiddle

    • Konerak
      Konerak over 12 years
      I'm getting values between 48 and 57, using your code and Opera as browser.
  • AEMLoviji
    AEMLoviji over 12 years
    what does it means e=e || event ?
  • KooiInc
    KooiInc over 12 years
    In 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
    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
    Benny Bottema over 8 years
    Why the hell are different keyCodes being used based on the event that was triggered. I'm using the same key on my keyboard!
  • awj
    awj almost 8 years
    Works 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
    JoeTidee over 6 years
    Good solution because backspace doesn't get picked up using keypress.