Events

The Web platform provides several events which representing physical keys, text input, and text composition:

Key event properties

Input event properties

data : unicode text
inputType:

insertText	insert
insertFromPaste	insert
deleteContentBackward
deleteContentForward
insertCompositionText
insertReplacementText	replace previous insert (or char)

Event flow Examples

Data from https://w3c.github.io/uievents/tools/key-event-viewer.html

Basic typing
1) keydown       65     state “”
2) input event   'a'    state “a”
3) keyup         65     state “a”
4) keydown       65     state “a”
5) input event   'a'    state “aa”
6) keyup         65     state “aa”

macOS press-and-hold character variant selection (a -> å)
1) Keydown                           65    state “”
2) input event (insert)              'a'   state “a”
3) Keyup                             65    state “a”
2) input event (insertReplacement)   'å'   state “å”

Chrome Composition (¨+ u -> ü)
1) Keydown                          state “”
2) compositionstart
3) input (insertComposition)    '¨' state “¨”
3) input (insertComposition)    'ü' state “ü”
4) compositionend

Safari/FireFox Composition (¨+ u -> ü)
1) compositionstart
2) input (insertComposition)    '¨' state “¨”
3) Keydown                          state “¨”
4) input (insertComposition)    'ü' state “ü”
5) compositionend

Safari two-set Korean
1) input insertText            'ㅎ'  state 'ㅎ'
2) input insertReplacementText '하’  state '하'

Mobile Safari predicted text input
1) input event “Jeg“               state “Jeg”
2) input event “er“                state “Jeg er”

Desktop Function Keys
1) keydown F1                      state “”
2) keyup F1                        state “”

Windows replace " " at end of predicted word with "."
0)                                 state “word ”
1) input event (insert)      ' .'  state “word .”
2) input deleteContentBackward     state “word.”

Notes

• Not all non-basic input has "compose" events (Korean, macOS press-and-hold character variant selection)
• Chrome sends keydown before composition start  - we can’t know at keydown time if complex input compose is in progress )
• beforeinput.getTargetRanges() gives us the target insert and deletion range, in cases where the end of the input string is not the target for the event.

Testing

https://w3c.github.io/uievents/tools/key-event-viewer.html