Get Correct keyCode for keypad(numpad) keys

Question

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

Boucher

I'm getting values between 48 and 57, using your code and Opera as browser. – Impressionist

Answer 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))

[Edit 2023/07] A very old answer. Nowadays keyboardEvent.keyCode is deprecated. Use keyboardEvent.key or keyboardEvent.code instead.

document.addEventListener(`keydown`, handle);

function handle(evt) {
  console.clear();
  console.log(`control (+) ${evt.ctrlKey}, shift (+) ${
    evt.shiftKey}, alt (+) ${evt.altKey}`);
  console.log(`${evt.key} (code: ${evt.code})`);
}

<h2>Press any key</h2>

Wordplay

what does it means e=e || event ? – Boucher

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). – Wordplay

+1 to your comment :-) . And your code works greate. but little problem. i will send it after five seconds. – Boucher

Why the hell are different keyCodes being used based on the event that was triggered. I'm using the same key on my keyboard! – Burress

Answer 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);

Cacoepy

Good solution because backspace doesn't get picked up using keypress. – Tombstone

Answer 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.

Asare

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/…). – Athome

Answer 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);
}

Obliterate

Answer 5

event.charCode at onKeyPress return the same code when press a number in keyboard and keypad. but event.keyCode at onKeyDown (or up) return different code. => get char: use event.charCode at onKeyPress event event.preventDefault() (or event.returnValue=false on IE) for number use event.keyCode at onKeyDown event

Topazolite

Answer 6

I think a safer way is not assuming the value keys that will be used. You could get the working value by the KeyboardEvent object and access its properties "DOM_VK_*". Let me give you an example.

 const kcN0=KeyboardEvent.DOM_VK_0;//get the 0 key value (commonly,48)
 const kcN9=KeyboardEvent.DOM_VK_9;//get the 9 key value (commonly, 57)
 const kcNPad0=KeyboardEvent.DOM_VK_NUMPAD0;//get the NUMPAD 0 key value (commonly,96)
 const kcNPad9=KeyboardEvent.DOM_VK_NUMPAD9;//get the NUMPAD 9 key value (commonly,105)
 const kcNPad_L=KeyboardEvent.DOM_KEY_LOCATION_NUMPAD;//get the key location of NUMPAD (commonly, 3)

and evalute the event variable "kbEv"

let pressKeyCode=(kbEv.which||kbEv.keyCode); if( kbEv.location===kcNPad_L && pressKeyCode>=kcNumP0 && pressKeyCode<=kcNumP9 ) pressKeyCode=kcN0+kcNPad9-pressKeyCode;

I've only assumed that from 0 to 9 will be sequential in those two disjoint numerical digit pattern set.

Coth