Question

MDN is very vague about what the CompositionEvent means。没有示例，相关事件，例如compositionstart，compositionupdate和compositionend，也没有示例，也没有更好地解释。

引用MDN：

DOM CompositionEvent表示由于用户间接输入文本而发生的事件。

而且，对于事件：

准备好一段文本的合成时，将触发compositionstart事件（类似于键盘输入的按键按下，但是会触发需要一系列按键和特殊输入（例如语音识别或手机上的单词建议）的特殊字符触发）。 [...] 当IME开始合成时，壁虎会在触发该事件，并且某些平台在启动合成后就没有取消该API的API。

This answer指出CompositionEvents主要用于非拉丁字符（例如，当用户输入日语字符时）。我认为任何需要IME（=输入法？）的东西都可以触发这些合成事件。我只使用拉丁字符，所以我从来没有使用过IME。尽管IME显然也与Android键盘的组成有关。

我的问题：什么是CompositionEvents？何时触发这些事件？请提供具体示例以阐明其用途。而且：它可以用于组成诸如ô，ç和ü之类的Unicode字符吗？

Answer 1

CompositionEvent

构图事件提供了一种通过键盘事件以补充或替代方式输入文本的方法，以便允许使用键盘上通常不可用的字符。例如，尽管没有标准的美国键盘，Composition Events仍可用于为字符添加重音符号，从其基本组件或类别中建立许多亚洲语言的语标，从移动设备上的按键组合中选择单词选择键盘，或使用语音识别处理器将语音命令转换为文本。有关如何将合成事件与键盘事件结合使用的示例，请参见§5 Keyboard events and key values。

从概念上讲，撰写会话由一个compositionstart事件，一个或多个compositionupdate事件和一个compositionend事件组成，并且data属性的值在每个会话期间此事件链的每个阶段。

注意： 在撰写会话处于活动状态时，如果键盘是与撰写会话一起使用的输入设备，则键盘事件可以调度到DOM。请参阅compositionstart事件详细信息和IME部分以了解相关事件的顺序。

不是所有的IME系统或设备都将必要的数据公开给DOM，因此活动合成字符串（“阅读窗口”或“候选选择菜单”选项）可能无法通过此界面使用，在这种情况下，可以由empty string表示。

引用： 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>

运行上述HTML文件，并在Mac键盘上编写一个à（Alt-`，a），我得到以下结果：

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`: à           |

由于WebKit，我使用的是keyCode而不是key。 keydown值之间的差异不是那么重要。的事件顺序有所不同，而且启动合成后Firefox不会触发keydown，Chrome会在中间给您一个，而Safari在结尾处会额外抛出一个事实。

Answer 2

所以当我使用例如通过敲击键盘上的一个合成键或从OS语言首选项菜单中选择IME日语来输入日语，键盘将进入一种模式，该模式将多个按键组合到单个平假名/汉字中。

例如用日语kuruma编写汽车。我将进入IME模式，（我认为这是将触发compositionstart事件的地方），然后开始键入'k，u'，它将转换为平假名く，此时IME将列出可能的汉字从く开始，直到'r，u'る继续（我假设这是触发compositionupdate事件的地方），直到我按下空格或从IME下拉菜单中选择一个汉字。此时，将显示最终组成的单词车（kuruma，汽车），并将其插入到文本框中，并触发compositionend事件。

什么是JavaScript的CompositionEvent？请举例子

2 个答案: