Specify the `textInput` event

[zcorpan]

Chromium and WebKit support a textInput event, which is similar to beforeinput. Firefox doesn't support it (yet), but this is a common web compat issue, so we plan to implement it.

Bugs:

• https://bugzilla.mozilla.org/show_bug.cgi?id=903746
• https://bugs.chromium.org/p/chromium/issues/detail?id=701480
• https://bugs.webkit.org/buglist.cgi?bug_status=UNCONFIRMED&bug_status=NEW&bug_status=ASSIGNED&bug_status=REOPENED&bug_status=RESOLVED&bug_status=VERIFIED&bug_status=CLOSED&list_id=9349913&product=WebKit&query_format=advanced&short_desc=textinput%20event&short_desc_type=allwordssubstr

IDL:

• https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/events/text_event.idl
• https://github.com/WebKit/WebKit/blob/main/Source/WebCore/dom/TextEvent.idl

One interop difference I've found so far is the order of events. Demo: https://software.hixie.ch/utilities/js/live-dom-viewer/saved/11385

• Chrome: beforeinput is fired first, then textInput.
• Safari: textInput is fired first, then beforeinput.

[dtapuska]

Ugh... https://chromestatus.com/metrics/feature/timeline/popularity/831 shows it increasing. Too bad we haven't seen it decrease, do we know if this is a few new frameworks that started using it?

[zcorpan]

It is used by draft.js, see https://github.com/facebook/react/issues/11211 (though from my analysis, not all sites using it are broken in Firefox).

Sites that were broken in Firefox due to this include WhatsApp, Facebook, Twitter, Reddit, and others. The top sites have been addressed by interventions and/or outreach, but for the long tail I think it's a net compat win to support the event.

[zcorpan]

Demo with more logging: https://software.hixie.ch/utilities/js/live-dom-viewer/saved/11841

textInput is not fired if you're in a composition (testing "^a" on macOS).

[zcorpan]

Typing a into the input:

Safari TP 171:

log: keydown on [object HTMLInputElement]: key=a code=KeyA location=0 ctrlKey=false shiftKey=false altKey=false metaKey=false repeat=false isComposing=false keyIdentifier=U+0041 keyLocation=0 altGraphKey=false charCode=0 keyCode=65 which=65 DOM_KEY_LOCATION_STANDARD=0 DOM_KEY_LOCATION_LEFT=1 DOM_KEY_LOCATION_RIGHT=2 DOM_KEY_LOCATION_NUMPAD=3 
log: keypress on [object HTMLInputElement]: key=a code=KeyA location=0 ctrlKey=false shiftKey=false altKey=false metaKey=false repeat=false isComposing=false keyIdentifier= keyLocation=0 altGraphKey=false charCode=97 keyCode=97 which=97 DOM_KEY_LOCATION_STANDARD=0 DOM_KEY_LOCATION_LEFT=1 DOM_KEY_LOCATION_RIGHT=2 DOM_KEY_LOCATION_NUMPAD=3 
log: textInput on [object HTMLInputElement]: data=a 
log: beforeinput on [object HTMLInputElement]: inputType=insertText data=a isComposing=false dataTransfer=null 
log: input on [object HTMLInputElement]: inputType=insertText data=a isComposing=false dataTransfer=null 
log: keyup on [object HTMLInputElement]: key=a code=KeyA location=0 ctrlKey=false shiftKey=false altKey=false metaKey=false repeat=false isComposing=false keyIdentifier=U+0041 keyLocation=0 altGraphKey=false charCode=0 keyCode=65 which=65 DOM_KEY_LOCATION_STANDARD=0 DOM_KEY_LOCATION_LEFT=1 DOM_KEY_LOCATION_RIGHT=2 DOM_KEY_LOCATION_NUMPAD=3 

Chrome Canary 116:

log: keydown on [object HTMLInputElement]: key=a code=KeyA location=0 ctrlKey=false shiftKey=false altKey=false metaKey=false repeat=false isComposing=false charCode=0 keyCode=65 DOM_KEY_LOCATION_STANDARD=0 DOM_KEY_LOCATION_LEFT=1 DOM_KEY_LOCATION_RIGHT=2 DOM_KEY_LOCATION_NUMPAD=3 
log: keypress on [object HTMLInputElement]: key=a code=KeyA location=0 ctrlKey=false shiftKey=false altKey=false metaKey=false repeat=false isComposing=false charCode=97 keyCode=97 DOM_KEY_LOCATION_STANDARD=0 DOM_KEY_LOCATION_LEFT=1 DOM_KEY_LOCATION_RIGHT=2 DOM_KEY_LOCATION_NUMPAD=3 
log: beforeinput on [object HTMLInputElement]: data=a isComposing=false inputType=insertText dataTransfer=null 
log: textInput on [object HTMLInputElement]: data=a 
log: input on [object HTMLInputElement]: data=a isComposing=false inputType=insertText dataTransfer=null 
log: keyup on [object HTMLInputElement]: key=a code=KeyA location=0 ctrlKey=false shiftKey=false altKey=false metaKey=false repeat=false isComposing=false charCode=0 keyCode=65 DOM_KEY_LOCATION_STANDARD=0 DOM_KEY_LOCATION_LEFT=1 DOM_KEY_LOCATION_RIGHT=2 DOM_KEY_LOCATION_NUMPAD=3 

Firefox Nightly 116:

log: keydown on [object HTMLInputElement]: charCode=0 keyCode=65 altKey=false ctrlKey=false shiftKey=false metaKey=false location=0 repeat=false isComposing=false key=a code=KeyA DOM_KEY_LOCATION_STANDARD=0 DOM_KEY_LOCATION_LEFT=1 DOM_KEY_LOCATION_RIGHT=2 DOM_KEY_LOCATION_NUMPAD=3 DOM_VK_CANCEL=3 DOM_VK_HELP=6 DOM_VK_BACK_SPACE=8 DOM_VK_TAB=9 DOM_VK_CLEAR=12 DOM_VK_RETURN=13 DOM_VK_SHIFT=16 DOM_VK_CONTROL=17 DOM_VK_ALT=18 DOM_VK_PAUSE=19 DOM_VK_CAPS_LOCK=20 DOM_VK_KANA=21 DOM_VK_HANGUL=21 DOM_VK_EISU=22 DOM_VK_JUNJA=23 DOM_VK_FINAL=24 DOM_VK_HANJA=25 DOM_VK_KANJI=25 DOM_VK_ESCAPE=27 DOM_VK_CONVERT=28 DOM_VK_NONCONVERT=29 DOM_VK_ACCEPT=30 DOM_VK_MODECHANGE=31 DOM_VK_SPACE=32 DOM_VK_PAGE_UP=33 DOM_VK_PAGE_DOWN=34 DOM_VK_END=35 DOM_VK_HOME=36 DOM_VK_LEFT=37 DOM_VK_UP=38 DOM_VK_RIGHT=39 DOM_VK_DOWN=40 DOM_VK_SELECT=41 DOM_VK_PRINT=42 DOM_VK_EXECUTE=43 DOM_VK_PRINTSCREEN=44 DOM_VK_INSERT=45 DOM_VK_DELETE=46 DOM_VK_0=48 DOM_VK_1=49 DOM_VK_2=50 DOM_VK_3=51 DOM_VK_4=52 DOM_VK_5=53 DOM_VK_6=54 DOM_VK_7=55 DOM_VK_8=56 DOM_VK_9=57 DOM_VK_COLON=58 DOM_VK_SEMICOLON=59 DOM_VK_LESS_THAN=60 DOM_VK_EQUALS=61 DOM_VK_GREATER_THAN=62 DOM_VK_QUESTION_MARK=63 DOM_VK_AT=64 DOM_VK_A=65 DOM_VK_B=66 DOM_VK_C=67 DOM_VK_D=68 DOM_VK_E=69 DOM_VK_F=70 DOM_VK_G=71 DOM_VK_H=72 DOM_VK_I=73 DOM_VK_J=74 DOM_VK_K=75 DOM_VK_L=76 DOM_VK_M=77 DOM_VK_N=78 DOM_VK_O=79 DOM_VK_P=80 DOM_VK_Q=81 DOM_VK_R=82 DOM_VK_S=83 DOM_VK_T=84 DOM_VK_U=85 DOM_VK_V=86 DOM_VK_W=87 DOM_VK_X=88 DOM_VK_Y=89 DOM_VK_Z=90 DOM_VK_WIN=91 DOM_VK_CONTEXT_MENU=93 DOM_VK_SLEEP=95 DOM_VK_NUMPAD0=96 DOM_VK_NUMPAD1=97 DOM_VK_NUMPAD2=98 DOM_VK_NUMPAD3=99 DOM_VK_NUMPAD4=100 DOM_VK_NUMPAD5=101 DOM_VK_NUMPAD6=102 DOM_VK_NUMPAD7=103 DOM_VK_NUMPAD8=104 DOM_VK_NUMPAD9=105 DOM_VK_MULTIPLY=106 DOM_VK_ADD=107 DOM_VK_SEPARATOR=108 DOM_VK_SUBTRACT=109 DOM_VK_DECIMAL=110 DOM_VK_DIVIDE=111 DOM_VK_F1=112 DOM_VK_F2=113 DOM_VK_F3=114 DOM_VK_F4=115 DOM_VK_F5=116 DOM_VK_F6=117 DOM_VK_F7=118 DOM_VK_F8=119 DOM_VK_F9=120 DOM_VK_F10=121 DOM_VK_F11=122 DOM_VK_F12=123 DOM_VK_F13=124 DOM_VK_F14=125 DOM_VK_F15=126 DOM_VK_F16=127 DOM_VK_F17=128 DOM_VK_F18=129 DOM_VK_F19=130 DOM_VK_F20=131 DOM_VK_F21=132 DOM_VK_F22=133 DOM_VK_F23=134 DOM_VK_F24=135 DOM_VK_NUM_LOCK=144 DOM_VK_SCROLL_LOCK=145 DOM_VK_WIN_OEM_FJ_JISHO=146 DOM_VK_WIN_OEM_FJ_MASSHOU=147 DOM_VK_WIN_OEM_FJ_TOUROKU=148 DOM_VK_WIN_OEM_FJ_LOYA=149 DOM_VK_WIN_OEM_FJ_ROYA=150 DOM_VK_CIRCUMFLEX=160 DOM_VK_EXCLAMATION=161 DOM_VK_DOUBLE_QUOTE=162 DOM_VK_HASH=163 DOM_VK_DOLLAR=164 DOM_VK_PERCENT=165 DOM_VK_AMPERSAND=166 DOM_VK_UNDERSCORE=167 DOM_VK_OPEN_PAREN=168 DOM_VK_CLOSE_PAREN=169 DOM_VK_ASTERISK=170 DOM_VK_PLUS=171 DOM_VK_PIPE=172 DOM_VK_HYPHEN_MINUS=173 DOM_VK_OPEN_CURLY_BRACKET=174 DOM_VK_CLOSE_CURLY_BRACKET=175 DOM_VK_TILDE=176 DOM_VK_VOLUME_MUTE=181 DOM_VK_VOLUME_DOWN=182 DOM_VK_VOLUME_UP=183 DOM_VK_COMMA=188 DOM_VK_PERIOD=190 DOM_VK_SLASH=191 DOM_VK_BACK_QUOTE=192 DOM_VK_OPEN_BRACKET=219 DOM_VK_BACK_SLASH=220 DOM_VK_CLOSE_BRACKET=221 DOM_VK_QUOTE=222 DOM_VK_META=224 DOM_VK_ALTGR=225 DOM_VK_WIN_ICO_HELP=227 DOM_VK_WIN_ICO_00=228 DOM_VK_PROCESSKEY=229 DOM_VK_WIN_ICO_CLEAR=230 DOM_VK_WIN_OEM_RESET=233 DOM_VK_WIN_OEM_JUMP=234 DOM_VK_WIN_OEM_PA1=235 DOM_VK_WIN_OEM_PA2=236 DOM_VK_WIN_OEM_PA3=237 DOM_VK_WIN_OEM_WSCTRL=238 DOM_VK_WIN_OEM_CUSEL=239 DOM_VK_WIN_OEM_ATTN=240 DOM_VK_WIN_OEM_FINISH=241 DOM_VK_WIN_OEM_COPY=242 DOM_VK_WIN_OEM_AUTO=243 DOM_VK_WIN_OEM_ENLW=244 DOM_VK_WIN_OEM_BACKTAB=245 DOM_VK_ATTN=246 DOM_VK_CRSEL=247 DOM_VK_EXSEL=248 DOM_VK_EREOF=249 DOM_VK_PLAY=250 DOM_VK_ZOOM=251 DOM_VK_PA1=253 DOM_VK_WIN_OEM_CLEAR=254 
log: keypress on [object HTMLInputElement]: charCode=97 keyCode=97 altKey=false ctrlKey=false shiftKey=false metaKey=false location=0 repeat=false isComposing=false key=a code=KeyA DOM_KEY_LOCATION_STANDARD=0 DOM_KEY_LOCATION_LEFT=1 DOM_KEY_LOCATION_RIGHT=2 DOM_KEY_LOCATION_NUMPAD=3 DOM_VK_CANCEL=3 DOM_VK_HELP=6 DOM_VK_BACK_SPACE=8 DOM_VK_TAB=9 DOM_VK_CLEAR=12 DOM_VK_RETURN=13 DOM_VK_SHIFT=16 DOM_VK_CONTROL=17 DOM_VK_ALT=18 DOM_VK_PAUSE=19 DOM_VK_CAPS_LOCK=20 DOM_VK_KANA=21 DOM_VK_HANGUL=21 DOM_VK_EISU=22 DOM_VK_JUNJA=23 DOM_VK_FINAL=24 DOM_VK_HANJA=25 DOM_VK_KANJI=25 DOM_VK_ESCAPE=27 DOM_VK_CONVERT=28 DOM_VK_NONCONVERT=29 DOM_VK_ACCEPT=30 DOM_VK_MODECHANGE=31 DOM_VK_SPACE=32 DOM_VK_PAGE_UP=33 DOM_VK_PAGE_DOWN=34 DOM_VK_END=35 DOM_VK_HOME=36 DOM_VK_LEFT=37 DOM_VK_UP=38 DOM_VK_RIGHT=39 DOM_VK_DOWN=40 DOM_VK_SELECT=41 DOM_VK_PRINT=42 DOM_VK_EXECUTE=43 DOM_VK_PRINTSCREEN=44 DOM_VK_INSERT=45 DOM_VK_DELETE=46 DOM_VK_0=48 DOM_VK_1=49 DOM_VK_2=50 DOM_VK_3=51 DOM_VK_4=52 DOM_VK_5=53 DOM_VK_6=54 DOM_VK_7=55 DOM_VK_8=56 DOM_VK_9=57 DOM_VK_COLON=58 DOM_VK_SEMICOLON=59 DOM_VK_LESS_THAN=60 DOM_VK_EQUALS=61 DOM_VK_GREATER_THAN=62 DOM_VK_QUESTION_MARK=63 DOM_VK_AT=64 DOM_VK_A=65 DOM_VK_B=66 DOM_VK_C=67 DOM_VK_D=68 DOM_VK_E=69 DOM_VK_F=70 DOM_VK_G=71 DOM_VK_H=72 DOM_VK_I=73 DOM_VK_J=74 DOM_VK_K=75 DOM_VK_L=76 DOM_VK_M=77 DOM_VK_N=78 DOM_VK_O=79 DOM_VK_P=80 DOM_VK_Q=81 DOM_VK_R=82 DOM_VK_S=83 DOM_VK_T=84 DOM_VK_U=85 DOM_VK_V=86 DOM_VK_W=87 DOM_VK_X=88 DOM_VK_Y=89 DOM_VK_Z=90 DOM_VK_WIN=91 DOM_VK_CONTEXT_MENU=93 DOM_VK_SLEEP=95 DOM_VK_NUMPAD0=96 DOM_VK_NUMPAD1=97 DOM_VK_NUMPAD2=98 DOM_VK_NUMPAD3=99 DOM_VK_NUMPAD4=100 DOM_VK_NUMPAD5=101 DOM_VK_NUMPAD6=102 DOM_VK_NUMPAD7=103 DOM_VK_NUMPAD8=104 DOM_VK_NUMPAD9=105 DOM_VK_MULTIPLY=106 DOM_VK_ADD=107 DOM_VK_SEPARATOR=108 DOM_VK_SUBTRACT=109 DOM_VK_DECIMAL=110 DOM_VK_DIVIDE=111 DOM_VK_F1=112 DOM_VK_F2=113 DOM_VK_F3=114 DOM_VK_F4=115 DOM_VK_F5=116 DOM_VK_F6=117 DOM_VK_F7=118 DOM_VK_F8=119 DOM_VK_F9=120 DOM_VK_F10=121 DOM_VK_F11=122 DOM_VK_F12=123 DOM_VK_F13=124 DOM_VK_F14=125 DOM_VK_F15=126 DOM_VK_F16=127 DOM_VK_F17=128 DOM_VK_F18=129 DOM_VK_F19=130 DOM_VK_F20=131 DOM_VK_F21=132 DOM_VK_F22=133 DOM_VK_F23=134 DOM_VK_F24=135 DOM_VK_NUM_LOCK=144 DOM_VK_SCROLL_LOCK=145 DOM_VK_WIN_OEM_FJ_JISHO=146 DOM_VK_WIN_OEM_FJ_MASSHOU=147 DOM_VK_WIN_OEM_FJ_TOUROKU=148 DOM_VK_WIN_OEM_FJ_LOYA=149 DOM_VK_WIN_OEM_FJ_ROYA=150 DOM_VK_CIRCUMFLEX=160 DOM_VK_EXCLAMATION=161 DOM_VK_DOUBLE_QUOTE=162 DOM_VK_HASH=163 DOM_VK_DOLLAR=164 DOM_VK_PERCENT=165 DOM_VK_AMPERSAND=166 DOM_VK_UNDERSCORE=167 DOM_VK_OPEN_PAREN=168 DOM_VK_CLOSE_PAREN=169 DOM_VK_ASTERISK=170 DOM_VK_PLUS=171 DOM_VK_PIPE=172 DOM_VK_HYPHEN_MINUS=173 DOM_VK_OPEN_CURLY_BRACKET=174 DOM_VK_CLOSE_CURLY_BRACKET=175 DOM_VK_TILDE=176 DOM_VK_VOLUME_MUTE=181 DOM_VK_VOLUME_DOWN=182 DOM_VK_VOLUME_UP=183 DOM_VK_COMMA=188 DOM_VK_PERIOD=190 DOM_VK_SLASH=191 DOM_VK_BACK_QUOTE=192 DOM_VK_OPEN_BRACKET=219 DOM_VK_BACK_SLASH=220 DOM_VK_CLOSE_BRACKET=221 DOM_VK_QUOTE=222 DOM_VK_META=224 DOM_VK_ALTGR=225 DOM_VK_WIN_ICO_HELP=227 DOM_VK_WIN_ICO_00=228 DOM_VK_PROCESSKEY=229 DOM_VK_WIN_ICO_CLEAR=230 DOM_VK_WIN_OEM_RESET=233 DOM_VK_WIN_OEM_JUMP=234 DOM_VK_WIN_OEM_PA1=235 DOM_VK_WIN_OEM_PA2=236 DOM_VK_WIN_OEM_PA3=237 DOM_VK_WIN_OEM_WSCTRL=238 DOM_VK_WIN_OEM_CUSEL=239 DOM_VK_WIN_OEM_ATTN=240 DOM_VK_WIN_OEM_FINISH=241 DOM_VK_WIN_OEM_COPY=242 DOM_VK_WIN_OEM_AUTO=243 DOM_VK_WIN_OEM_ENLW=244 DOM_VK_WIN_OEM_BACKTAB=245 DOM_VK_ATTN=246 DOM_VK_CRSEL=247 DOM_VK_EXSEL=248 DOM_VK_EREOF=249 DOM_VK_PLAY=250 DOM_VK_ZOOM=251 DOM_VK_PA1=253 DOM_VK_WIN_OEM_CLEAR=254 
log: beforeinput on [object HTMLInputElement]: isComposing=false inputType=insertText data=a dataTransfer=null 
log: input on [object HTMLInputElement]: isComposing=false inputType=insertText data=a dataTransfer=null 
log: keyup on [object HTMLInputElement]: charCode=0 keyCode=65 altKey=false ctrlKey=false shiftKey=false metaKey=false location=0 repeat=false isComposing=false key=a code=KeyA DOM_KEY_LOCATION_STANDARD=0 DOM_KEY_LOCATION_LEFT=1 DOM_KEY_LOCATION_RIGHT=2 DOM_KEY_LOCATION_NUMPAD=3 DOM_VK_CANCEL=3 DOM_VK_HELP=6 DOM_VK_BACK_SPACE=8 DOM_VK_TAB=9 DOM_VK_CLEAR=12 DOM_VK_RETURN=13 DOM_VK_SHIFT=16 DOM_VK_CONTROL=17 DOM_VK_ALT=18 DOM_VK_PAUSE=19 DOM_VK_CAPS_LOCK=20 DOM_VK_KANA=21 DOM_VK_HANGUL=21 DOM_VK_EISU=22 DOM_VK_JUNJA=23 DOM_VK_FINAL=24 DOM_VK_HANJA=25 DOM_VK_KANJI=25 DOM_VK_ESCAPE=27 DOM_VK_CONVERT=28 DOM_VK_NONCONVERT=29 DOM_VK_ACCEPT=30 DOM_VK_MODECHANGE=31 DOM_VK_SPACE=32 DOM_VK_PAGE_UP=33 DOM_VK_PAGE_DOWN=34 DOM_VK_END=35 DOM_VK_HOME=36 DOM_VK_LEFT=37 DOM_VK_UP=38 DOM_VK_RIGHT=39 DOM_VK_DOWN=40 DOM_VK_SELECT=41 DOM_VK_PRINT=42 DOM_VK_EXECUTE=43 DOM_VK_PRINTSCREEN=44 DOM_VK_INSERT=45 DOM_VK_DELETE=46 DOM_VK_0=48 DOM_VK_1=49 DOM_VK_2=50 DOM_VK_3=51 DOM_VK_4=52 DOM_VK_5=53 DOM_VK_6=54 DOM_VK_7=55 DOM_VK_8=56 DOM_VK_9=57 DOM_VK_COLON=58 DOM_VK_SEMICOLON=59 DOM_VK_LESS_THAN=60 DOM_VK_EQUALS=61 DOM_VK_GREATER_THAN=62 DOM_VK_QUESTION_MARK=63 DOM_VK_AT=64 DOM_VK_A=65 DOM_VK_B=66 DOM_VK_C=67 DOM_VK_D=68 DOM_VK_E=69 DOM_VK_F=70 DOM_VK_G=71 DOM_VK_H=72 DOM_VK_I=73 DOM_VK_J=74 DOM_VK_K=75 DOM_VK_L=76 DOM_VK_M=77 DOM_VK_N=78 DOM_VK_O=79 DOM_VK_P=80 DOM_VK_Q=81 DOM_VK_R=82 DOM_VK_S=83 DOM_VK_T=84 DOM_VK_U=85 DOM_VK_V=86 DOM_VK_W=87 DOM_VK_X=88 DOM_VK_Y=89 DOM_VK_Z=90 DOM_VK_WIN=91 DOM_VK_CONTEXT_MENU=93 DOM_VK_SLEEP=95 DOM_VK_NUMPAD0=96 DOM_VK_NUMPAD1=97 DOM_VK_NUMPAD2=98 DOM_VK_NUMPAD3=99 DOM_VK_NUMPAD4=100 DOM_VK_NUMPAD5=101 DOM_VK_NUMPAD6=102 DOM_VK_NUMPAD7=103 DOM_VK_NUMPAD8=104 DOM_VK_NUMPAD9=105 DOM_VK_MULTIPLY=106 DOM_VK_ADD=107 DOM_VK_SEPARATOR=108 DOM_VK_SUBTRACT=109 DOM_VK_DECIMAL=110 DOM_VK_DIVIDE=111 DOM_VK_F1=112 DOM_VK_F2=113 DOM_VK_F3=114 DOM_VK_F4=115 DOM_VK_F5=116 DOM_VK_F6=117 DOM_VK_F7=118 DOM_VK_F8=119 DOM_VK_F9=120 DOM_VK_F10=121 DOM_VK_F11=122 DOM_VK_F12=123 DOM_VK_F13=124 DOM_VK_F14=125 DOM_VK_F15=126 DOM_VK_F16=127 DOM_VK_F17=128 DOM_VK_F18=129 DOM_VK_F19=130 DOM_VK_F20=131 DOM_VK_F21=132 DOM_VK_F22=133 DOM_VK_F23=134 DOM_VK_F24=135 DOM_VK_NUM_LOCK=144 DOM_VK_SCROLL_LOCK=145 DOM_VK_WIN_OEM_FJ_JISHO=146 DOM_VK_WIN_OEM_FJ_MASSHOU=147 DOM_VK_WIN_OEM_FJ_TOUROKU=148 DOM_VK_WIN_OEM_FJ_LOYA=149 DOM_VK_WIN_OEM_FJ_ROYA=150 DOM_VK_CIRCUMFLEX=160 DOM_VK_EXCLAMATION=161 DOM_VK_DOUBLE_QUOTE=162 DOM_VK_HASH=163 DOM_VK_DOLLAR=164 DOM_VK_PERCENT=165 DOM_VK_AMPERSAND=166 DOM_VK_UNDERSCORE=167 DOM_VK_OPEN_PAREN=168 DOM_VK_CLOSE_PAREN=169 DOM_VK_ASTERISK=170 DOM_VK_PLUS=171 DOM_VK_PIPE=172 DOM_VK_HYPHEN_MINUS=173 DOM_VK_OPEN_CURLY_BRACKET=174 DOM_VK_CLOSE_CURLY_BRACKET=175 DOM_VK_TILDE=176 DOM_VK_VOLUME_MUTE=181 DOM_VK_VOLUME_DOWN=182 DOM_VK_VOLUME_UP=183 DOM_VK_COMMA=188 DOM_VK_PERIOD=190 DOM_VK_SLASH=191 DOM_VK_BACK_QUOTE=192 DOM_VK_OPEN_BRACKET=219 DOM_VK_BACK_SLASH=220 DOM_VK_CLOSE_BRACKET=221 DOM_VK_QUOTE=222 DOM_VK_META=224 DOM_VK_ALTGR=225 DOM_VK_WIN_ICO_HELP=227 DOM_VK_WIN_ICO_00=228 DOM_VK_PROCESSKEY=229 DOM_VK_WIN_ICO_CLEAR=230 DOM_VK_WIN_OEM_RESET=233 DOM_VK_WIN_OEM_JUMP=234 DOM_VK_WIN_OEM_PA1=235 DOM_VK_WIN_OEM_PA2=236 DOM_VK_WIN_OEM_PA3=237 DOM_VK_WIN_OEM_WSCTRL=238 DOM_VK_WIN_OEM_CUSEL=239 DOM_VK_WIN_OEM_ATTN=240 DOM_VK_WIN_OEM_FINISH=241 DOM_VK_WIN_OEM_COPY=242 DOM_VK_WIN_OEM_AUTO=243 DOM_VK_WIN_OEM_ENLW=244 DOM_VK_WIN_OEM_BACKTAB=245 DOM_VK_ATTN=246 DOM_VK_CRSEL=247 DOM_VK_EXSEL=248 DOM_VK_EREOF=249 DOM_VK_PLAY=250 DOM_VK_ZOOM=251 DOM_VK_PA1=253 DOM_VK_WIN_OEM_CLEAR=254 

Typing ´a into the input:

Safari TP 171:

log: compositionstart on [object HTMLInputElement]: data= 
log: compositionupdate on [object HTMLInputElement]: data=´ 
log: beforeinput on [object HTMLInputElement]: inputType=insertCompositionText data=´ isComposing=true dataTransfer=null 
log: input on [object HTMLInputElement]: inputType=insertCompositionText data=´ isComposing=true dataTransfer=null 
log: keydown on [object HTMLInputElement]: key=Dead code=Equal location=0 ctrlKey=false shiftKey=false altKey=false metaKey=false repeat=false isComposing=true keyIdentifier=Unidentified keyLocation=0 altGraphKey=false charCode=0 keyCode=229 which=229 DOM_KEY_LOCATION_STANDARD=0 DOM_KEY_LOCATION_LEFT=1 DOM_KEY_LOCATION_RIGHT=2 DOM_KEY_LOCATION_NUMPAD=3 
log: keyup on [object HTMLInputElement]: key=´ code=Equal location=0 ctrlKey=false shiftKey=false altKey=false metaKey=false repeat=false isComposing=true keyIdentifier=Unidentified keyLocation=0 altGraphKey=false charCode=0 keyCode=187 which=187 DOM_KEY_LOCATION_STANDARD=0 DOM_KEY_LOCATION_LEFT=1 DOM_KEY_LOCATION_RIGHT=2 DOM_KEY_LOCATION_NUMPAD=3 
log: beforeinput on [object HTMLInputElement]: inputType=deleteCompositionText data=null isComposing=true dataTransfer=null 
log: input on [object HTMLInputElement]: inputType=deleteCompositionText data=null isComposing=true dataTransfer=null 
log: textInput on [object HTMLInputElement]: data=á 
log: beforeinput on [object HTMLInputElement]: inputType=insertFromComposition data=á isComposing=true dataTransfer=null 
log: input on [object HTMLInputElement]: inputType=insertFromComposition data=á isComposing=true dataTransfer=null 
log: compositionend on [object HTMLInputElement]: data=á 
log: keydown on [object HTMLInputElement]: key=á code=KeyA location=0 ctrlKey=false shiftKey=false altKey=false metaKey=false repeat=false isComposing=false keyIdentifier=U+0041 keyLocation=0 altGraphKey=false charCode=0 keyCode=229 which=229 DOM_KEY_LOCATION_STANDARD=0 DOM_KEY_LOCATION_LEFT=1 DOM_KEY_LOCATION_RIGHT=2 DOM_KEY_LOCATION_NUMPAD=3 
log: keyup on [object HTMLInputElement]: key=a code=KeyA location=0 ctrlKey=false shiftKey=false altKey=false metaKey=false repeat=false isComposing=false keyIdentifier=U+0041 keyLocation=0 altGraphKey=false charCode=0 keyCode=65 which=65 DOM_KEY_LOCATION_STANDARD=0 DOM_KEY_LOCATION_LEFT=1 DOM_KEY_LOCATION_RIGHT=2 DOM_KEY_LOCATION_NUMPAD=3 

Chrome Canary 116:

log: keydown on [object HTMLInputElement]: key=Dead code=Equal location=0 ctrlKey=false shiftKey=false altKey=false metaKey=false repeat=false isComposing=false charCode=0 keyCode=229 DOM_KEY_LOCATION_STANDARD=0 DOM_KEY_LOCATION_LEFT=1 DOM_KEY_LOCATION_RIGHT=2 DOM_KEY_LOCATION_NUMPAD=3 
log: compositionstart on [object HTMLInputElement]: data= 
log: beforeinput on [object HTMLInputElement]: data=´ isComposing=true inputType=insertCompositionText dataTransfer=null 
log: compositionupdate on [object HTMLInputElement]: data=´ 
log: input on [object HTMLInputElement]: data=´ isComposing=true inputType=insertCompositionText dataTransfer=null 
log: keyup on [object HTMLInputElement]: key=Dead code=Equal location=0 ctrlKey=false shiftKey=false altKey=false metaKey=false repeat=false isComposing=true charCode=0 keyCode=187 DOM_KEY_LOCATION_STANDARD=0 DOM_KEY_LOCATION_LEFT=1 DOM_KEY_LOCATION_RIGHT=2 DOM_KEY_LOCATION_NUMPAD=3 
log: keydown on [object HTMLInputElement]: key=á code=KeyA location=0 ctrlKey=false shiftKey=false altKey=false metaKey=false repeat=false isComposing=true charCode=0 keyCode=229 DOM_KEY_LOCATION_STANDARD=0 DOM_KEY_LOCATION_LEFT=1 DOM_KEY_LOCATION_RIGHT=2 DOM_KEY_LOCATION_NUMPAD=3 
log: beforeinput on [object HTMLInputElement]: data=á isComposing=true inputType=insertCompositionText dataTransfer=null 
log: compositionupdate on [object HTMLInputElement]: data=á 
log: textInput on [object HTMLInputElement]: data=á 
log: input on [object HTMLInputElement]: data=á isComposing=true inputType=insertCompositionText dataTransfer=null 
log: compositionend on [object HTMLInputElement]: data=á 
log: keyup on [object HTMLInputElement]: key=a code=KeyA location=0 ctrlKey=false shiftKey=false altKey=false metaKey=false repeat=false isComposing=false charCode=0 keyCode=65 DOM_KEY_LOCATION_STANDARD=0 DOM_KEY_LOCATION_LEFT=1 DOM_KEY_LOCATION_RIGHT=2 DOM_KEY_LOCATION_NUMPAD=3 

Firefox Nightly 116:

log: keydown on [object HTMLInputElement]: charCode=0 keyCode=192 altKey=false ctrlKey=false shiftKey=false metaKey=false location=0 repeat=false isComposing=false key=Dead code=Equal DOM_KEY_LOCATION_STANDARD=0 DOM_KEY_LOCATION_LEFT=1 DOM_KEY_LOCATION_RIGHT=2 DOM_KEY_LOCATION_NUMPAD=3 DOM_VK_CANCEL=3 DOM_VK_HELP=6 DOM_VK_BACK_SPACE=8 DOM_VK_TAB=9 DOM_VK_CLEAR=12 DOM_VK_RETURN=13 DOM_VK_SHIFT=16 DOM_VK_CONTROL=17 DOM_VK_ALT=18 DOM_VK_PAUSE=19 DOM_VK_CAPS_LOCK=20 DOM_VK_KANA=21 DOM_VK_HANGUL=21 DOM_VK_EISU=22 DOM_VK_JUNJA=23 DOM_VK_FINAL=24 DOM_VK_HANJA=25 DOM_VK_KANJI=25 DOM_VK_ESCAPE=27 DOM_VK_CONVERT=28 DOM_VK_NONCONVERT=29 DOM_VK_ACCEPT=30 DOM_VK_MODECHANGE=31 DOM_VK_SPACE=32 DOM_VK_PAGE_UP=33 DOM_VK_PAGE_DOWN=34 DOM_VK_END=35 DOM_VK_HOME=36 DOM_VK_LEFT=37 DOM_VK_UP=38 DOM_VK_RIGHT=39 DOM_VK_DOWN=40 DOM_VK_SELECT=41 DOM_VK_PRINT=42 DOM_VK_EXECUTE=43 DOM_VK_PRINTSCREEN=44 DOM_VK_INSERT=45 DOM_VK_DELETE=46 DOM_VK_0=48 DOM_VK_1=49 DOM_VK_2=50 DOM_VK_3=51 DOM_VK_4=52 DOM_VK_5=53 DOM_VK_6=54 DOM_VK_7=55 DOM_VK_8=56 DOM_VK_9=57 DOM_VK_COLON=58 DOM_VK_SEMICOLON=59 DOM_VK_LESS_THAN=60 DOM_VK_EQUALS=61 DOM_VK_GREATER_THAN=62 DOM_VK_QUESTION_MARK=63 DOM_VK_AT=64 DOM_VK_A=65 DOM_VK_B=66 DOM_VK_C=67 DOM_VK_D=68 DOM_VK_E=69 DOM_VK_F=70 DOM_VK_G=71 DOM_VK_H=72 DOM_VK_I=73 DOM_VK_J=74 DOM_VK_K=75 DOM_VK_L=76 DOM_VK_M=77 DOM_VK_N=78 DOM_VK_O=79 DOM_VK_P=80 DOM_VK_Q=81 DOM_VK_R=82 DOM_VK_S=83 DOM_VK_T=84 DOM_VK_U=85 DOM_VK_V=86 DOM_VK_W=87 DOM_VK_X=88 DOM_VK_Y=89 DOM_VK_Z=90 DOM_VK_WIN=91 DOM_VK_CONTEXT_MENU=93 DOM_VK_SLEEP=95 DOM_VK_NUMPAD0=96 DOM_VK_NUMPAD1=97 DOM_VK_NUMPAD2=98 DOM_VK_NUMPAD3=99 DOM_VK_NUMPAD4=100 DOM_VK_NUMPAD5=101 DOM_VK_NUMPAD6=102 DOM_VK_NUMPAD7=103 DOM_VK_NUMPAD8=104 DOM_VK_NUMPAD9=105 DOM_VK_MULTIPLY=106 DOM_VK_ADD=107 DOM_VK_SEPARATOR=108 DOM_VK_SUBTRACT=109 DOM_VK_DECIMAL=110 DOM_VK_DIVIDE=111 DOM_VK_F1=112 DOM_VK_F2=113 DOM_VK_F3=114 DOM_VK_F4=115 DOM_VK_F5=116 DOM_VK_F6=117 DOM_VK_F7=118 DOM_VK_F8=119 DOM_VK_F9=120 DOM_VK_F10=121 DOM_VK_F11=122 DOM_VK_F12=123 DOM_VK_F13=124 DOM_VK_F14=125 DOM_VK_F15=126 DOM_VK_F16=127 DOM_VK_F17=128 DOM_VK_F18=129 DOM_VK_F19=130 DOM_VK_F20=131 DOM_VK_F21=132 DOM_VK_F22=133 DOM_VK_F23=134 DOM_VK_F24=135 DOM_VK_NUM_LOCK=144 DOM_VK_SCROLL_LOCK=145 DOM_VK_WIN_OEM_FJ_JISHO=146 DOM_VK_WIN_OEM_FJ_MASSHOU=147 DOM_VK_WIN_OEM_FJ_TOUROKU=148 DOM_VK_WIN_OEM_FJ_LOYA=149 DOM_VK_WIN_OEM_FJ_ROYA=150 DOM_VK_CIRCUMFLEX=160 DOM_VK_EXCLAMATION=161 DOM_VK_DOUBLE_QUOTE=162 DOM_VK_HASH=163 DOM_VK_DOLLAR=164 DOM_VK_PERCENT=165 DOM_VK_AMPERSAND=166 DOM_VK_UNDERSCORE=167 DOM_VK_OPEN_PAREN=168 DOM_VK_CLOSE_PAREN=169 DOM_VK_ASTERISK=170 DOM_VK_PLUS=171 DOM_VK_PIPE=172 DOM_VK_HYPHEN_MINUS=173 DOM_VK_OPEN_CURLY_BRACKET=174 DOM_VK_CLOSE_CURLY_BRACKET=175 DOM_VK_TILDE=176 DOM_VK_VOLUME_MUTE=181 DOM_VK_VOLUME_DOWN=182 DOM_VK_VOLUME_UP=183 DOM_VK_COMMA=188 DOM_VK_PERIOD=190 DOM_VK_SLASH=191 DOM_VK_BACK_QUOTE=192 DOM_VK_OPEN_BRACKET=219 DOM_VK_BACK_SLASH=220 DOM_VK_CLOSE_BRACKET=221 DOM_VK_QUOTE=222 DOM_VK_META=224 DOM_VK_ALTGR=225 DOM_VK_WIN_ICO_HELP=227 DOM_VK_WIN_ICO_00=228 DOM_VK_PROCESSKEY=229 DOM_VK_WIN_ICO_CLEAR=230 DOM_VK_WIN_OEM_RESET=233 DOM_VK_WIN_OEM_JUMP=234 DOM_VK_WIN_OEM_PA1=235 DOM_VK_WIN_OEM_PA2=236 DOM_VK_WIN_OEM_PA3=237 DOM_VK_WIN_OEM_WSCTRL=238 DOM_VK_WIN_OEM_CUSEL=239 DOM_VK_WIN_OEM_ATTN=240 DOM_VK_WIN_OEM_FINISH=241 DOM_VK_WIN_OEM_COPY=242 DOM_VK_WIN_OEM_AUTO=243 DOM_VK_WIN_OEM_ENLW=244 DOM_VK_WIN_OEM_BACKTAB=245 DOM_VK_ATTN=246 DOM_VK_CRSEL=247 DOM_VK_EXSEL=248 DOM_VK_EREOF=249 DOM_VK_PLAY=250 DOM_VK_ZOOM=251 DOM_VK_PA1=253 DOM_VK_WIN_OEM_CLEAR=254 
log: compositionstart on [object HTMLInputElement]: data= locale= 
log: compositionupdate on [object HTMLInputElement]: data=´ locale= 
log: beforeinput on [object HTMLInputElement]: isComposing=true inputType=insertCompositionText data=´ dataTransfer=null 
log: input on [object HTMLInputElement]: isComposing=true inputType=insertCompositionText data=´ dataTransfer=null 
log: keyup on [object HTMLInputElement]: charCode=0 keyCode=192 altKey=false ctrlKey=false shiftKey=false metaKey=false location=0 repeat=false isComposing=true key=´ code=Equal DOM_KEY_LOCATION_STANDARD=0 DOM_KEY_LOCATION_LEFT=1 DOM_KEY_LOCATION_RIGHT=2 DOM_KEY_LOCATION_NUMPAD=3 DOM_VK_CANCEL=3 DOM_VK_HELP=6 DOM_VK_BACK_SPACE=8 DOM_VK_TAB=9 DOM_VK_CLEAR=12 DOM_VK_RETURN=13 DOM_VK_SHIFT=16 DOM_VK_CONTROL=17 DOM_VK_ALT=18 DOM_VK_PAUSE=19 DOM_VK_CAPS_LOCK=20 DOM_VK_KANA=21 DOM_VK_HANGUL=21 DOM_VK_EISU=22 DOM_VK_JUNJA=23 DOM_VK_FINAL=24 DOM_VK_HANJA=25 DOM_VK_KANJI=25 DOM_VK_ESCAPE=27 DOM_VK_CONVERT=28 DOM_VK_NONCONVERT=29 DOM_VK_ACCEPT=30 DOM_VK_MODECHANGE=31 DOM_VK_SPACE=32 DOM_VK_PAGE_UP=33 DOM_VK_PAGE_DOWN=34 DOM_VK_END=35 DOM_VK_HOME=36 DOM_VK_LEFT=37 DOM_VK_UP=38 DOM_VK_RIGHT=39 DOM_VK_DOWN=40 DOM_VK_SELECT=41 DOM_VK_PRINT=42 DOM_VK_EXECUTE=43 DOM_VK_PRINTSCREEN=44 DOM_VK_INSERT=45 DOM_VK_DELETE=46 DOM_VK_0=48 DOM_VK_1=49 DOM_VK_2=50 DOM_VK_3=51 DOM_VK_4=52 DOM_VK_5=53 DOM_VK_6=54 DOM_VK_7=55 DOM_VK_8=56 DOM_VK_9=57 DOM_VK_COLON=58 DOM_VK_SEMICOLON=59 DOM_VK_LESS_THAN=60 DOM_VK_EQUALS=61 DOM_VK_GREATER_THAN=62 DOM_VK_QUESTION_MARK=63 DOM_VK_AT=64 DOM_VK_A=65 DOM_VK_B=66 DOM_VK_C=67 DOM_VK_D=68 DOM_VK_E=69 DOM_VK_F=70 DOM_VK_G=71 DOM_VK_H=72 DOM_VK_I=73 DOM_VK_J=74 DOM_VK_K=75 DOM_VK_L=76 DOM_VK_M=77 DOM_VK_N=78 DOM_VK_O=79 DOM_VK_P=80 DOM_VK_Q=81 DOM_VK_R=82 DOM_VK_S=83 DOM_VK_T=84 DOM_VK_U=85 DOM_VK_V=86 DOM_VK_W=87 DOM_VK_X=88 DOM_VK_Y=89 DOM_VK_Z=90 DOM_VK_WIN=91 DOM_VK_CONTEXT_MENU=93 DOM_VK_SLEEP=95 DOM_VK_NUMPAD0=96 DOM_VK_NUMPAD1=97 DOM_VK_NUMPAD2=98 DOM_VK_NUMPAD3=99 DOM_VK_NUMPAD4=100 DOM_VK_NUMPAD5=101 DOM_VK_NUMPAD6=102 DOM_VK_NUMPAD7=103 DOM_VK_NUMPAD8=104 DOM_VK_NUMPAD9=105 DOM_VK_MULTIPLY=106 DOM_VK_ADD=107 DOM_VK_SEPARATOR=108 DOM_VK_SUBTRACT=109 DOM_VK_DECIMAL=110 DOM_VK_DIVIDE=111 DOM_VK_F1=112 DOM_VK_F2=113 DOM_VK_F3=114 DOM_VK_F4=115 DOM_VK_F5=116 DOM_VK_F6=117 DOM_VK_F7=118 DOM_VK_F8=119 DOM_VK_F9=120 DOM_VK_F10=121 DOM_VK_F11=122 DOM_VK_F12=123 DOM_VK_F13=124 DOM_VK_F14=125 DOM_VK_F15=126 DOM_VK_F16=127 DOM_VK_F17=128 DOM_VK_F18=129 DOM_VK_F19=130 DOM_VK_F20=131 DOM_VK_F21=132 DOM_VK_F22=133 DOM_VK_F23=134 DOM_VK_F24=135 DOM_VK_NUM_LOCK=144 DOM_VK_SCROLL_LOCK=145 DOM_VK_WIN_OEM_FJ_JISHO=146 DOM_VK_WIN_OEM_FJ_MASSHOU=147 DOM_VK_WIN_OEM_FJ_TOUROKU=148 DOM_VK_WIN_OEM_FJ_LOYA=149 DOM_VK_WIN_OEM_FJ_ROYA=150 DOM_VK_CIRCUMFLEX=160 DOM_VK_EXCLAMATION=161 DOM_VK_DOUBLE_QUOTE=162 DOM_VK_HASH=163 DOM_VK_DOLLAR=164 DOM_VK_PERCENT=165 DOM_VK_AMPERSAND=166 DOM_VK_UNDERSCORE=167 DOM_VK_OPEN_PAREN=168 DOM_VK_CLOSE_PAREN=169 DOM_VK_ASTERISK=170 DOM_VK_PLUS=171 DOM_VK_PIPE=172 DOM_VK_HYPHEN_MINUS=173 DOM_VK_OPEN_CURLY_BRACKET=174 DOM_VK_CLOSE_CURLY_BRACKET=175 DOM_VK_TILDE=176 DOM_VK_VOLUME_MUTE=181 DOM_VK_VOLUME_DOWN=182 DOM_VK_VOLUME_UP=183 DOM_VK_COMMA=188 DOM_VK_PERIOD=190 DOM_VK_SLASH=191 DOM_VK_BACK_QUOTE=192 DOM_VK_OPEN_BRACKET=219 DOM_VK_BACK_SLASH=220 DOM_VK_CLOSE_BRACKET=221 DOM_VK_QUOTE=222 DOM_VK_META=224 DOM_VK_ALTGR=225 DOM_VK_WIN_ICO_HELP=227 DOM_VK_WIN_ICO_00=228 DOM_VK_PROCESSKEY=229 DOM_VK_WIN_ICO_CLEAR=230 DOM_VK_WIN_OEM_RESET=233 DOM_VK_WIN_OEM_JUMP=234 DOM_VK_WIN_OEM_PA1=235 DOM_VK_WIN_OEM_PA2=236 DOM_VK_WIN_OEM_PA3=237 DOM_VK_WIN_OEM_WSCTRL=238 DOM_VK_WIN_OEM_CUSEL=239 DOM_VK_WIN_OEM_ATTN=240 DOM_VK_WIN_OEM_FINISH=241 DOM_VK_WIN_OEM_COPY=242 DOM_VK_WIN_OEM_AUTO=243 DOM_VK_WIN_OEM_ENLW=244 DOM_VK_WIN_OEM_BACKTAB=245 DOM_VK_ATTN=246 DOM_VK_CRSEL=247 DOM_VK_EXSEL=248 DOM_VK_EREOF=249 DOM_VK_PLAY=250 DOM_VK_ZOOM=251 DOM_VK_PA1=253 DOM_VK_WIN_OEM_CLEAR=254 
log: keydown on [object HTMLInputElement]: charCode=0 keyCode=65 altKey=false ctrlKey=false shiftKey=false metaKey=false location=0 repeat=false isComposing=true key=á code=KeyA DOM_KEY_LOCATION_STANDARD=0 DOM_KEY_LOCATION_LEFT=1 DOM_KEY_LOCATION_RIGHT=2 DOM_KEY_LOCATION_NUMPAD=3 DOM_VK_CANCEL=3 DOM_VK_HELP=6 DOM_VK_BACK_SPACE=8 DOM_VK_TAB=9 DOM_VK_CLEAR=12 DOM_VK_RETURN=13 DOM_VK_SHIFT=16 DOM_VK_CONTROL=17 DOM_VK_ALT=18 DOM_VK_PAUSE=19 DOM_VK_CAPS_LOCK=20 DOM_VK_KANA=21 DOM_VK_HANGUL=21 DOM_VK_EISU=22 DOM_VK_JUNJA=23 DOM_VK_FINAL=24 DOM_VK_HANJA=25 DOM_VK_KANJI=25 DOM_VK_ESCAPE=27 DOM_VK_CONVERT=28 DOM_VK_NONCONVERT=29 DOM_VK_ACCEPT=30 DOM_VK_MODECHANGE=31 DOM_VK_SPACE=32 DOM_VK_PAGE_UP=33 DOM_VK_PAGE_DOWN=34 DOM_VK_END=35 DOM_VK_HOME=36 DOM_VK_LEFT=37 DOM_VK_UP=38 DOM_VK_RIGHT=39 DOM_VK_DOWN=40 DOM_VK_SELECT=41 DOM_VK_PRINT=42 DOM_VK_EXECUTE=43 DOM_VK_PRINTSCREEN=44 DOM_VK_INSERT=45 DOM_VK_DELETE=46 DOM_VK_0=48 DOM_VK_1=49 DOM_VK_2=50 DOM_VK_3=51 DOM_VK_4=52 DOM_VK_5=53 DOM_VK_6=54 DOM_VK_7=55 DOM_VK_8=56 DOM_VK_9=57 DOM_VK_COLON=58 DOM_VK_SEMICOLON=59 DOM_VK_LESS_THAN=60 DOM_VK_EQUALS=61 DOM_VK_GREATER_THAN=62 DOM_VK_QUESTION_MARK=63 DOM_VK_AT=64 DOM_VK_A=65 DOM_VK_B=66 DOM_VK_C=67 DOM_VK_D=68 DOM_VK_E=69 DOM_VK_F=70 DOM_VK_G=71 DOM_VK_H=72 DOM_VK_I=73 DOM_VK_J=74 DOM_VK_K=75 DOM_VK_L=76 DOM_VK_M=77 DOM_VK_N=78 DOM_VK_O=79 DOM_VK_P=80 DOM_VK_Q=81 DOM_VK_R=82 DOM_VK_S=83 DOM_VK_T=84 DOM_VK_U=85 DOM_VK_V=86 DOM_VK_W=87 DOM_VK_X=88 DOM_VK_Y=89 DOM_VK_Z=90 DOM_VK_WIN=91 DOM_VK_CONTEXT_MENU=93 DOM_VK_SLEEP=95 DOM_VK_NUMPAD0=96 DOM_VK_NUMPAD1=97 DOM_VK_NUMPAD2=98 DOM_VK_NUMPAD3=99 DOM_VK_NUMPAD4=100 DOM_VK_NUMPAD5=101 DOM_VK_NUMPAD6=102 DOM_VK_NUMPAD7=103 DOM_VK_NUMPAD8=104 DOM_VK_NUMPAD9=105 DOM_VK_MULTIPLY=106 DOM_VK_ADD=107 DOM_VK_SEPARATOR=108 DOM_VK_SUBTRACT=109 DOM_VK_DECIMAL=110 DOM_VK_DIVIDE=111 DOM_VK_F1=112 DOM_VK_F2=113 DOM_VK_F3=114 DOM_VK_F4=115 DOM_VK_F5=116 DOM_VK_F6=117 DOM_VK_F7=118 DOM_VK_F8=119 DOM_VK_F9=120 DOM_VK_F10=121 DOM_VK_F11=122 DOM_VK_F12=123 DOM_VK_F13=124 DOM_VK_F14=125 DOM_VK_F15=126 DOM_VK_F16=127 DOM_VK_F17=128 DOM_VK_F18=129 DOM_VK_F19=130 DOM_VK_F20=131 DOM_VK_F21=132 DOM_VK_F22=133 DOM_VK_F23=134 DOM_VK_F24=135 DOM_VK_NUM_LOCK=144 DOM_VK_SCROLL_LOCK=145 DOM_VK_WIN_OEM_FJ_JISHO=146 DOM_VK_WIN_OEM_FJ_MASSHOU=147 DOM_VK_WIN_OEM_FJ_TOUROKU=148 DOM_VK_WIN_OEM_FJ_LOYA=149 DOM_VK_WIN_OEM_FJ_ROYA=150 DOM_VK_CIRCUMFLEX=160 DOM_VK_EXCLAMATION=161 DOM_VK_DOUBLE_QUOTE=162 DOM_VK_HASH=163 DOM_VK_DOLLAR=164 DOM_VK_PERCENT=165 DOM_VK_AMPERSAND=166 DOM_VK_UNDERSCORE=167 DOM_VK_OPEN_PAREN=168 DOM_VK_CLOSE_PAREN=169 DOM_VK_ASTERISK=170 DOM_VK_PLUS=171 DOM_VK_PIPE=172 DOM_VK_HYPHEN_MINUS=173 DOM_VK_OPEN_CURLY_BRACKET=174 DOM_VK_CLOSE_CURLY_BRACKET=175 DOM_VK_TILDE=176 DOM_VK_VOLUME_MUTE=181 DOM_VK_VOLUME_DOWN=182 DOM_VK_VOLUME_UP=183 DOM_VK_COMMA=188 DOM_VK_PERIOD=190 DOM_VK_SLASH=191 DOM_VK_BACK_QUOTE=192 DOM_VK_OPEN_BRACKET=219 DOM_VK_BACK_SLASH=220 DOM_VK_CLOSE_BRACKET=221 DOM_VK_QUOTE=222 DOM_VK_META=224 DOM_VK_ALTGR=225 DOM_VK_WIN_ICO_HELP=227 DOM_VK_WIN_ICO_00=228 DOM_VK_PROCESSKEY=229 DOM_VK_WIN_ICO_CLEAR=230 DOM_VK_WIN_OEM_RESET=233 DOM_VK_WIN_OEM_JUMP=234 DOM_VK_WIN_OEM_PA1=235 DOM_VK_WIN_OEM_PA2=236 DOM_VK_WIN_OEM_PA3=237 DOM_VK_WIN_OEM_WSCTRL=238 DOM_VK_WIN_OEM_CUSEL=239 DOM_VK_WIN_OEM_ATTN=240 DOM_VK_WIN_OEM_FINISH=241 DOM_VK_WIN_OEM_COPY=242 DOM_VK_WIN_OEM_AUTO=243 DOM_VK_WIN_OEM_ENLW=244 DOM_VK_WIN_OEM_BACKTAB=245 DOM_VK_ATTN=246 DOM_VK_CRSEL=247 DOM_VK_EXSEL=248 DOM_VK_EREOF=249 DOM_VK_PLAY=250 DOM_VK_ZOOM=251 DOM_VK_PA1=253 DOM_VK_WIN_OEM_CLEAR=254 
log: compositionupdate on [object HTMLInputElement]: data=á locale= 
log: beforeinput on [object HTMLInputElement]: isComposing=true inputType=insertCompositionText data=á dataTransfer=null 
log: compositionend on [object HTMLInputElement]: data=á locale= 
log: input on [object HTMLInputElement]: isComposing=false inputType=insertCompositionText data=á dataTransfer=null 
log: keyup on [object HTMLInputElement]: charCode=0 keyCode=65 altKey=false ctrlKey=false shiftKey=false metaKey=false location=0 repeat=false isComposing=false key=a code=KeyA DOM_KEY_LOCATION_STANDARD=0 DOM_KEY_LOCATION_LEFT=1 DOM_KEY_LOCATION_RIGHT=2 DOM_KEY_LOCATION_NUMPAD=3 DOM_VK_CANCEL=3 DOM_VK_HELP=6 DOM_VK_BACK_SPACE=8 DOM_VK_TAB=9 DOM_VK_CLEAR=12 DOM_VK_RETURN=13 DOM_VK_SHIFT=16 DOM_VK_CONTROL=17 DOM_VK_ALT=18 DOM_VK_PAUSE=19 DOM_VK_CAPS_LOCK=20 DOM_VK_KANA=21 DOM_VK_HANGUL=21 DOM_VK_EISU=22 DOM_VK_JUNJA=23 DOM_VK_FINAL=24 DOM_VK_HANJA=25 DOM_VK_KANJI=25 DOM_VK_ESCAPE=27 DOM_VK_CONVERT=28 DOM_VK_NONCONVERT=29 DOM_VK_ACCEPT=30 DOM_VK_MODECHANGE=31 DOM_VK_SPACE=32 DOM_VK_PAGE_UP=33 DOM_VK_PAGE_DOWN=34 DOM_VK_END=35 DOM_VK_HOME=36 DOM_VK_LEFT=37 DOM_VK_UP=38 DOM_VK_RIGHT=39 DOM_VK_DOWN=40 DOM_VK_SELECT=41 DOM_VK_PRINT=42 DOM_VK_EXECUTE=43 DOM_VK_PRINTSCREEN=44 DOM_VK_INSERT=45 DOM_VK_DELETE=46 DOM_VK_0=48 DOM_VK_1=49 DOM_VK_2=50 DOM_VK_3=51 DOM_VK_4=52 DOM_VK_5=53 DOM_VK_6=54 DOM_VK_7=55 DOM_VK_8=56 DOM_VK_9=57 DOM_VK_COLON=58 DOM_VK_SEMICOLON=59 DOM_VK_LESS_THAN=60 DOM_VK_EQUALS=61 DOM_VK_GREATER_THAN=62 DOM_VK_QUESTION_MARK=63 DOM_VK_AT=64 DOM_VK_A=65 DOM_VK_B=66 DOM_VK_C=67 DOM_VK_D=68 DOM_VK_E=69 DOM_VK_F=70 DOM_VK_G=71 DOM_VK_H=72 DOM_VK_I=73 DOM_VK_J=74 DOM_VK_K=75 DOM_VK_L=76 DOM_VK_M=77 DOM_VK_N=78 DOM_VK_O=79 DOM_VK_P=80 DOM_VK_Q=81 DOM_VK_R=82 DOM_VK_S=83 DOM_VK_T=84 DOM_VK_U=85 DOM_VK_V=86 DOM_VK_W=87 DOM_VK_X=88 DOM_VK_Y=89 DOM_VK_Z=90 DOM_VK_WIN=91 DOM_VK_CONTEXT_MENU=93 DOM_VK_SLEEP=95 DOM_VK_NUMPAD0=96 DOM_VK_NUMPAD1=97 DOM_VK_NUMPAD2=98 DOM_VK_NUMPAD3=99 DOM_VK_NUMPAD4=100 DOM_VK_NUMPAD5=101 DOM_VK_NUMPAD6=102 DOM_VK_NUMPAD7=103 DOM_VK_NUMPAD8=104 DOM_VK_NUMPAD9=105 DOM_VK_MULTIPLY=106 DOM_VK_ADD=107 DOM_VK_SEPARATOR=108 DOM_VK_SUBTRACT=109 DOM_VK_DECIMAL=110 DOM_VK_DIVIDE=111 DOM_VK_F1=112 DOM_VK_F2=113 DOM_VK_F3=114 DOM_VK_F4=115 DOM_VK_F5=116 DOM_VK_F6=117 DOM_VK_F7=118 DOM_VK_F8=119 DOM_VK_F9=120 DOM_VK_F10=121 DOM_VK_F11=122 DOM_VK_F12=123 DOM_VK_F13=124 DOM_VK_F14=125 DOM_VK_F15=126 DOM_VK_F16=127 DOM_VK_F17=128 DOM_VK_F18=129 DOM_VK_F19=130 DOM_VK_F20=131 DOM_VK_F21=132 DOM_VK_F22=133 DOM_VK_F23=134 DOM_VK_F24=135 DOM_VK_NUM_LOCK=144 DOM_VK_SCROLL_LOCK=145 DOM_VK_WIN_OEM_FJ_JISHO=146 DOM_VK_WIN_OEM_FJ_MASSHOU=147 DOM_VK_WIN_OEM_FJ_TOUROKU=148 DOM_VK_WIN_OEM_FJ_LOYA=149 DOM_VK_WIN_OEM_FJ_ROYA=150 DOM_VK_CIRCUMFLEX=160 DOM_VK_EXCLAMATION=161 DOM_VK_DOUBLE_QUOTE=162 DOM_VK_HASH=163 DOM_VK_DOLLAR=164 DOM_VK_PERCENT=165 DOM_VK_AMPERSAND=166 DOM_VK_UNDERSCORE=167 DOM_VK_OPEN_PAREN=168 DOM_VK_CLOSE_PAREN=169 DOM_VK_ASTERISK=170 DOM_VK_PLUS=171 DOM_VK_PIPE=172 DOM_VK_HYPHEN_MINUS=173 DOM_VK_OPEN_CURLY_BRACKET=174 DOM_VK_CLOSE_CURLY_BRACKET=175 DOM_VK_TILDE=176 DOM_VK_VOLUME_MUTE=181 DOM_VK_VOLUME_DOWN=182 DOM_VK_VOLUME_UP=183 DOM_VK_COMMA=188 DOM_VK_PERIOD=190 DOM_VK_SLASH=191 DOM_VK_BACK_QUOTE=192 DOM_VK_OPEN_BRACKET=219 DOM_VK_BACK_SLASH=220 DOM_VK_CLOSE_BRACKET=221 DOM_VK_QUOTE=222 DOM_VK_META=224 DOM_VK_ALTGR=225 DOM_VK_WIN_ICO_HELP=227 DOM_VK_WIN_ICO_00=228 DOM_VK_PROCESSKEY=229 DOM_VK_WIN_ICO_CLEAR=230 DOM_VK_WIN_OEM_RESET=233 DOM_VK_WIN_OEM_JUMP=234 DOM_VK_WIN_OEM_PA1=235 DOM_VK_WIN_OEM_PA2=236 DOM_VK_WIN_OEM_PA3=237 DOM_VK_WIN_OEM_WSCTRL=238 DOM_VK_WIN_OEM_CUSEL=239 DOM_VK_WIN_OEM_ATTN=240 DOM_VK_WIN_OEM_FINISH=241 DOM_VK_WIN_OEM_COPY=242 DOM_VK_WIN_OEM_AUTO=243 DOM_VK_WIN_OEM_ENLW=244 DOM_VK_WIN_OEM_BACKTAB=245 DOM_VK_ATTN=246 DOM_VK_CRSEL=247 DOM_VK_EXSEL=248 DOM_VK_EREOF=249 DOM_VK_PLAY=250 DOM_VK_ZOOM=251 DOM_VK_PA1=253 DOM_VK_WIN_OEM_CLEAR=254 

[masayuki-nakano]

About vs. beforeinput, I think that the better event (i.e., beforeinput) should be fired because if the default of beforeinput is prevented, textInput should not be fired and that behavior makes sense for modern editor apps since they can save the dispatching cost of textInput.

About vs. compositionupdate, I'm surprised at the event order in Chrome. compositionupdate represents the composition string change, it does not depend on editing content from UI Events spec point of view. Therefore, I think that the builtin editor should handle compositionupdate and dispatch beforeinput and input (as its default action). Therefore, I think that compositionupdate -> beforeinput -> textInput -> input is reasonable.

[masayuki-nakano]

Sites that were broken in Firefox due to this include WhatsApp, Facebook

Facebook shipped a replacement of DraftJS, whose name is Lexical, and they have already replaced DraftJS in thier produce with Lexical. So, is it true WhatsApp and Facebook still use DraftJS and broken with the usage of textInput?

[zcorpan]

Maybe not, but they were broken and there may still be a long tail of sites using DraftJS and are broken in the same way.

[zcorpan]

@rniwa is it ok to change the event order in WebKit so that beforeinput is before textInput?

~@chrishtr see @masayuki-nakano 's comment above about compositionupdate event order.~

Edit: filed a new issue for compositionupdate

• https://github.com/w3c/uievents/issues/354

[garykac]

textInput was an early proposal for what eventually became beforeinput and input. Conceptually, it's closer to input so the beforeinput event should definitely be fired beforehand.

As for specifying it, we could add a description in the Legacy sections (as with keypress), but I would not want to add it to the main body of the spec since it is not a recommended event.

[masayuki-nakano]

I agree. textInput should not be used in new web apps. Mozilla want it only for the broken libraries.