Menu
MDN is very vague about what the CompositionEvent means. There are no examples and the correlated events, such as compositionstart, compositionupdate and compositionend, also have no examples and don't explain it much better.
Quoting MDN:
The DOM CompositionEvent represents events that occur due to the user indirectly entering text.
And, for events:
The compositionstart event is fired when the composition of a passage of text is prepared (similar to keydown for a keyboard input, but fires with special characters that require a sequence of keys and other inputs such as speech recognition or word suggestion on mobile). [...] Gecko fires this event when IME starts composition, and some platforms don't have an API for canceling composition once it's begun.
This answer states that CompositionEvents are mostly used for non-latin characters (such as when user inputs Japanese characters). I think anything that needs an IME (= input method?) can trigger these composition events. I only use latin characters, so I have never used an IME, I guess. Although IME apparently also relates to Android keyboard's composition.
My question: What are CompositionEvents used for and when will these events be triggered? Please give concrete examples to clarify its uses. And also: can it be used for composing unicode characters such as ô, ç and ü?
855
The compositionstart event is fired when a text composition system such as an input method editor starts a new composition session. For example, this event could be fired after a user starts entering a Chinese character using a Pinyin IME.
The DOM CompositionEvent represents events that occur due to the user indirectly entering text. It is not React's own event.
The compositionstart event is fired when the composition of a passage of text is prepared (similar to keydown for a keyboard input, but fires with special characters that require a sequence of keys and other inputs such as speech recognition or word suggestion on mobile).
CompositionEvent
Composition Events provide a means for inputing text in a supplementary or alternate manner than by Keyboard Events, in order to allow the use of characters that might not be commonly available on keyboard. For example, Composition Events might be used to add accents to characters despite their absence from standard US keyboards, to build up logograms of many Asian languages from their base components or categories, to select word choices from a combination of key presses on a mobile device keyboard, or to convert voice commands into text using a speech recognition processor. Refer to §5 Keyboard events and key values for examples on how Composition Events are used in combination with keyboard events.
Conceptually, a composition session consists of one compositionstart event, one or more compositionupdate events, and one compositionend event, with the value of the data attribute persisting between each stage of this event chain during each session.
Note: While a composition session is active, keyboard events can be dispatched to the DOM if the keyboard is the input device used with the composition session. See the compositionstart event details and IME section for relevent event ordering.
Not all IME systems or devices expose the necessary data to the DOM, so the active composition string (the Reading Window or candidate selection menu option) might not be available through this interface, in which case the selection MAY be represented by the empty string.
Refer: https://www.w3.org/TR/uievents/#events-compositionevents
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CompositionUpdate</title>
</head>
<body>
<input id="input">
<pre id="log"></pre>
<script>
var input = document.getElementById('input')
, log = document.getElementById('log')
;
['compositionstart', 'compositionupdate', 'compositionend', 'keydown']
.forEach(function (event) {
input.addEventListener(event, function (ev) {
log.textContent += event + ': ' + (ev.data || ev.keyCode) + '\n';
}, true);
})
;
</script>
</body>
</html>Running the above HTML file, and composing an à on my Mac keyboard (Alt-`, a) I get the following results:
Gecko | Chromium | WebKit
----------------------------- | ----------------------------- | ---------------------------
`keydown`: 18 | `keydown`: 18 | `keydown`: 18
`keydown`: 192 | `keydown`: 229 | `compositionstart`: 0
`compositionstart`: undefined | `compositionstart`: undefined | `compositionupdate`: \`
`compositionupdate`: \` | `compositionupdate`: \` | `keydown`: 229
`compositionupdate`: à | `keydown`: 229 | `compositionend`: à
`compositionend`: à | `compositionupdate`: à | `keydown`: 229
| `compositionend`: à |
I'm using keyCode instead of key because WebKit. The differences between the keydown values are not that important. The
difference in event order, and the fact that Firefox triggers no keydown after composition is initiated, Chrome gives you one in the middle, and Safari throws in an extra one at the end is fun!
118
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
