What is JavaScript's CompositionEvent? Please give examples

后端未结

关注

 2  628

MDN is very vague about what the CompositionEvent means. There are no examples and the correlated events, such as compositionstart, compositionupdate and compositionend, als

相关标签:

2条回答

北海茫月

2020-12-17 02:29
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!
0 讨论(0)
发布评论:

提交评论
- 加载中...
名媛妹妹

2020-12-17 02:42

So when I use the e.g. Japanese either by hitting one of the composition keys on my keyboard or by selecting IME Japanese from the OS language preference menu the keyboard enters a mode where multiple key strokes are combined into a single Hiragana/Kanji.

For instance to write car in Japanese, kuruma. I'd enter IME mode, (I think this is where a compositionstart event will be triggered) and start typing 'k,u' which will be transformed to hiragana　く　and at this point the IME will list possible kanji that begin with the く　sound , this continues for 'r,u' る　etc. (I assume this is where the compositionupdate events are triggered) until I hit space or select a kanji from the IME dropdown menu. At this point the final composed word 車 (kuruma, car) is shown an inserted into the text box and a compositionend event is fired.

0 讨论(0)
发布评论:

提交评论
- 加载中...