获取小键盘（数字键盘）键的正确 keyCode

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: 'abcdefgh 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

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

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

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.

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

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

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.