什么是JavaScript的CompositionEvent?请举例子

fle*_*len 4 javascript dom-events

MDN对什么CompositionEvent手段非常含糊。有没有实例和相关事件,如compositionstartcompositionupdatecompositionend,也没有例子,并不更好的解释。

报价MDN:

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

并且,对于事件:

准备好文本段落的编写时,将触发compositionstart事件(类似于键盘输入的键按下,但会触发需要一系列键和其他输入(例如语音识别或手机上的单词建议)的特殊字符,从而触发该事件。[...] 当IME开始合成时,Gecko会触发此事件,并且某些平台一旦开始就没有取消合成的API。

该答案表明CompositionEvents主要用于非拉丁字符(例如,当用户输入日语字符时)。我认为任何需要IME(=输入法?)的东西都可以触发这些合成事件。我只使用拉丁字符,所以我从来没有使用过IME。尽管IME显然也与Android键盘的组成有关。

我的问题:什么是CompositionEvents?何时触发这些事件?请举具体的例子来阐明其用途。并且:它可以用于组成ôç和的Unicode字符ü吗?

Din*_*ule 7

CompositionEvent

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

从概念上讲,合成会话由一个compositionstart事件,一个或多个compositionupdate事件和一个compositionend事件组成数据属性的值在每个会话期间都在该事件链的每个阶段之间保持不变。

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

并非所有IME系统或设备都将必要的数据公开给DOM,因此活动合成字符串(“阅读窗口”或“候选选择菜单”选项)可能无法通过此接口使用,在这种情况下,选择可能由空字符串表示。

请参阅: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>
Run Code Online (Sandbox Code Playgroud)

运行上面的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`: à           |
Run Code Online (Sandbox Code Playgroud)

我使用keyCode而不是key因为WebKit。keydown值之间的差异不是那么重要。事件顺序的不同以及Firefox keydown在启动合成后不会触发,Chrome在中间提供一个,而Safari在末尾再添加一个的事实是很有趣的!

  • 谢谢您的详细解答!我仍在阅读参考资料并从中学到很多东西!如果我正确理解你的答案,那么在所有三个浏览器中都有一个用于组成字符“à”的“compositionEvent”,对吗?但我在 Windows 上,每当我尝试这些有趣的字符之一(例如 `à、ÿ、ô`)时,我都无法触发任何组合事件。难道我做错了什么?运行你的代码我仍然没有得到`compositionstart` (2认同)