Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Specify the textInput event #353

Closed
zcorpan opened this issue Jun 29, 2023 · 10 comments · Fixed by #362
Closed

Specify the textInput event #353

zcorpan opened this issue Jun 29, 2023 · 10 comments · Fixed by #362

Comments

@zcorpan
Copy link
Member

zcorpan commented Jun 29, 2023

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:

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
Copy link
Contributor

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
Copy link
Member Author

zcorpan commented Jul 4, 2023

It is used by draft.js, see facebook/react#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
Copy link
Member Author

zcorpan commented Jul 4, 2023

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
Copy link
Member Author

zcorpan commented Jul 4, 2023

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
Copy link

masayuki-nakano commented Jul 5, 2023

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
Copy link

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
Copy link
Member Author

zcorpan commented Jul 5, 2023

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
Copy link
Member Author

zcorpan commented Jul 5, 2023

@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

@garykac
Copy link
Member

garykac commented Aug 23, 2023

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
Copy link

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

zcorpan added a commit to zcorpan/uievents that referenced this issue Nov 24, 2023
garykac pushed a commit to zcorpan/uievents that referenced this issue Dec 4, 2023
zcorpan added a commit to zcorpan/uievents that referenced this issue Feb 8, 2024
garykac pushed a commit that referenced this issue Feb 21, 2024
* Specify the textInput event

Fixes #353

* void -> undefined in IDL

* Move textInput spec into event-algo.bs

* Try to fix build errors

* Second attempt with build errors

* Third attempt with build errors, remove slashes

* Fourth attempt, slash more slashes

* Don't fire textInput for delete. Fire it on paste.

* Fire textInput before compositionend

* Set .data for insertParagraph/insertLineBreak

* Don't set data to null

Also fix a typo (and infinite recursion) in initialize a TextEvent.

* Move IDL back to the main spec so that wpt will pick it up

* Don't fire textInput when pressing Enter in <input>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants