9

The javascript keypress event is deprecated:
https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event

Some people advise to rely exclusively on the keydown event, eg.:
Keydown is the only keyboard event we need
https://www.mutuallyhuman.com/blog/2018/03/27/keydown-is-the-only-keyboard-event-we-need/

The problem is that keydown and keypress are not synonymous. Critically, they do not return the same character in many/most cases. Keydown represents which key on the keyboard was pressed, while keypress represents which character the user actually typed.

In English, the distinction is important with regard to case: 

letter = String.fromCharCode(event.which);

When pressing the key "a" on the keyboard, letter would be "a" with keypress, but it is "A" with keydown.

The situation gets way more complicated with JCK languages because keypress receives correct characters for international keyboard layouts, unlike keydown which converts everything to single byte characters.

keydown and keyup events are now fired during IME composition:
https://www.fxsitecompat.com/en-CA/docs/2018/keydown-and-keyup-events-are-now-fired-during-ime-composition/

So, with keypress being deprecated, what should we use when we care about the character that the user intended to type, taking into account case, non-ASCII characters and multi-byte characters?

Related questions and references:

keyup event always return uppercase letter => The answer recommends the use of keypress.

String.fromCharCode not working on keydown event => The answer recommends the use of keypress.

String.fromCharCode on keypress and keydown are returning wrong characters => The answer notes that the keypress and keydown events are not interchangeable.

Replacement for deprecated `keypress` DOM event => The answer suggests using keydown without noting the difference it makes in terms of handling letter case, non-ascii characters and multi-byte characters. Also, the suggested alternative beforeinput does not appear to have any browser support.

Alternative for Keypress Event in Firefox Version 65+ => Question summarily downvoted, with a comment suggesting using keydown or beforeinput without having addressed any of the pitfalls mentioned above.

augustin
  • 14,373
  • 13
  • 66
  • 79
  • 3
    Use `beforeinput` or `keydown` instead of `keypress`, then read [`event.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) instead of `keyCode` or `which` (which both are deprecated years ago). – Teemu Apr 26 '19 at 05:19
  • 1
    @Teemu Thank you! I'll try that. You may post this as an answer, with or without a sample code, because all the research I had made led me to years old solutions, and I failed to understand the proper solution from the linked references and other search results I had consulted. I'm sure I am not the only one struggling with this today, as indicated by the linked downvoted question. – augustin Apr 26 '19 at 05:27
  • `keydown` and `event.key` seem indeed to be the way to go, except that a lot more extra code will be needed because now when the user types "A", I get the output "ShiftA"... I'll figure it out, eventually... ;) – augustin Apr 26 '19 at 05:43
  • 1
    The output is not "ShiftA", it is "Shift" and "A", the own output for the both of the key strikes. – Teemu Apr 26 '19 at 06:12
  • Yes, precisely. The point is that now I have to handle this myself in order filter out non-printable characters, whereas before, with `keypress`, the code was simpler and I directly got the input intended by the user. – augustin Apr 26 '19 at 07:25
  • 1
    WIth the old code you got inreliable results for other than basic ASCII codes, the numeric data represented the location of the key on the keyboard rather than the character. Anyway, it's relatively easy to check a non-printable character from `key` property, just check the length, if greater than one, then the character is non-printable. – Teemu Apr 26 '19 at 08:16

0 Answers0