UI Events Viewer / Input methods

Note: This project is in maintenance mode and will not be receiving further updates.

Please refer to the updated resources:

• The catalog of input methods is being maintained at danburzo.ro/input-methods/.
• UI Events Viewer has been rewritten in vanilla JavaScript here: danburzo.ro/ui-events-viewer/. Source code is inlined in the HTML.

---

Introduction

The purpose of this repository is to document various input methods / IMEs, how to install them, and the UI Events they trigger in the browser.

UI Events Viewer, available here:

https://danburzo.github.io/input-methods/index.html

Can be used to inspect the various keyboard / input / composition events that get triggered on a contenteditable element, using either the native DOM APIs or the React.js-polyfilled ones. It takes a cue from the excellent Keyboard Event Viewer.

Input methods

The danburzo.ro/input-methods/ project organizes input methods by operating system.

Specifications

• Input Events Level 2
• UI Events
• Static Range

Browser support and known limitations

beforeinput

Firefox	Chrome	Safari
Does not fire beforeinput — issue here	Added support in Chrome 60	Added support in Safari 10.1

Differences between native DOM and React

• React will send beforeinput as a SyntheticInputEvent of type compositionend when finishing a composition in Firefox; Chrome gets an event of type textInput.
• input events are SyntheticEvents instead of SyntheticInputEvents for some reason
• SyntheticKeyboardEvents don't have the code property.

Other resources

• IME Test from the VSCode Github repository.
• Keyboard Event Viewer

Contributing

See Contributing.md for ways to contribute — much appreciated!