-
Task
-
Resolution: Unresolved
-
Not Evaluated
-
None
-
None
-
None
Events
The Web platform provides several events which representing physical keys, text input, and text composition:
keydown | Physical key press |
keyup | Physical key release |
input | Text input |
compositionstart | New composition session start |
compositionupdate | Composition session update |
compositionend | Composition session cancelled or complete |
Key event properties
code | physical key code (ignoring keyboard layout) |
key | string representing key value |
Input event properties
data : unicode text
inputType:
insertText | insert |
insertFromPaste | insert |
deleteContentBackward | |
deleteContentForward | |
insertCompositionText | |
insertReplacementText | replace previous ![]() |
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.