Keeping in mind W3C's UI keyboard event table these changes filters out input events of type insertCompositionText on Safari.
Why introduce these changes?
Improve UX for Safari users with input sources which utilizes IME input (e.g. Hirgana)
Normalize inputTypes for input events for Safari.
How is this achieved?
End function execution on input events with inputTypeinsertCompositionText on _eventNormalize()
⚠️ For Safari, these changes will not format full-width input characters on the fly. Instead, the target element's input value will only be formatted on the compositionEnd event type. This introduces a smaller and less significant compromise on the UX, but ultimately solves the more important issue with inconsistent values between IME and the input value.
Additional Information
Safari handles Input Method Editors differently from other browsers. When surfacing input UI keyboard events, the data attribute holds different values from other non full-width input sources. Moreover, data is read-only.
While Mac OS allows users to disable IME editor through the Live Conversion option in keyboard preferences, input events of type insertCompositionText events are still raised and captured by the browser.
Testing
Typed in full-width character keyboard inputs (e.g. Hiragana) and made sure validation and formatting works as expected:
Fixes #38
Changes
input
events of typeinsertCompositionText
on Safari.Why introduce these changes?
inputTypes
forinput
events for Safari.How is this achieved?
End function execution on
input
events withinputType
insertCompositionText on_eventNormalize()
⚠️ For Safari, these changes will not format full-width input characters on the fly. Instead, the target element's input value will only be formatted on the
compositionEnd
event type. This introduces a smaller and less significant compromise on the UX, but ultimately solves the more important issue with inconsistent values between IME and the input value.Additional Information
Safari handles Input Method Editors differently from other browsers. When surfacing
input
UI keyboard events, thedata
attribute holds different values from other non full-width input sources. Moreover,data
is read-only.While Mac OS allows users to disable IME editor through the
Live Conversion
option in keyboard preferences,input
events of typeinsertCompositionText
events are still raised and captured by the browser.Testing
Typed in full-width character keyboard inputs (e.g. Hiragana) and made sure validation and formatting works as expected:
Desktop 🖥(Mac OSX High Sierra):
Mobile 📱: