本文介绍了什么是JavaScript的CompositionEvent?请举例子的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

。没有示例和相关事件,例如,和,也没有示例,也没有更好的解释。

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.

引用MDN:

并且,对于事件:

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

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.

我的问题:什么是CompositionEvents?何时触发这些事件?请提供具体示例以阐明其用途。而且:它可以用于组成unicode字符,例如ôçü

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 ü?

推荐答案

CompositionEvent

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

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.

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

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>

运行上面的内容HTML文件,然后在Mac键盘上组成一个à(Alt-`,a),我得到以下结果:

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

我使用的是 keyCode 而不是 key 因为WebKit。 keydown 值之间的区别不是那么重要。事件顺序上的
差异,以及启动组合后Firefox不会触发 keydown 的事实,Chrome在中间提供了一个,而Safari则额外提供了一个最后一个有趣!

I'm using keyCode instead of key because WebKit. The differences between the keydown values are not that important. Thedifference 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!

这篇关于什么是JavaScript的CompositionEvent?请举例子的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

06-01 02:34