diff options
Diffstat (limited to 'files/zh-cn/web/api/element/compositionstart_event/index.html')
| -rw-r--r-- | files/zh-cn/web/api/element/compositionstart_event/index.html | 153 |
1 files changed, 153 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/element/compositionstart_event/index.html b/files/zh-cn/web/api/element/compositionstart_event/index.html new file mode 100644 index 0000000000..3997c0b7b1 --- /dev/null +++ b/files/zh-cn/web/api/element/compositionstart_event/index.html @@ -0,0 +1,153 @@ +--- +title: compositionstart +slug: Web/API/Element/compositionstart_event +tags: + - Element + - Event + - Input method + - compositionstart + - 事件 + - 参考 +translation_of: Web/API/Element/compositionstart_event +original_slug: Web/Events/compositionstart +--- +<p>文本合成系统如 {{glossary("input method editor")}}（即输入法编辑器）开始新的输入合成时会触发 <strong><code>compositionstart</code></strong> 事件。</p> + +<p>例如，当用户使用拼音输入法开始输入汉字时，这个事件就会被触发。</p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>Bubbles</strong></td> + <td>Yes</td> + </tr> + <tr> + <td><strong>Cancelable</strong></td> + <td>Yes</td> + </tr> + <tr> + <td><strong>Interface</strong></td> + <td>{{domxref("CompositionEvent")}}</td> + </tr> + <tr> + <td><strong>Event handler property</strong></td> + <td> + <table> + <tbody> + <tr> + <td>None</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<pre>const inputElement = document.querySelector('input[type="text"]'); + +inputElement.addEventListener('compositionstart', (event) => { + console.log(`generated characters were: ${event.data}`); +});</pre> + +<h3 id="动态演示">动态演示</h3> + +<h4 id="HTML">HTML</h4> + +<pre><div class="control"> + <label for="name">On macOS, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> + <input type="text" id="example" name="example"> +</div> + +<div class="event-log"> + <label>Event log:</label> + <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> + <button class="clear-log">Clear</button> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre>body { + padding: .2rem; + display: grid; + grid-template-areas: "control log"; +} + +.control { + grid-area: control; +} + +.event-log { + grid-area: log; +} + +.event-log-contents { + resize: none; +} + +label, button { + display: block; +} + +input[type="text"] { + margin: .5rem 0; +} + +kbd { + border-radius: 3px; + padding: 1px 2px 0; + border: 1px solid black; +} +</pre> + +<h4 id="JS">JS</h4> + +<pre>const inputElement = document.querySelector('input[type="text"]'); +const log = document.querySelector('.event-log-contents'); +const clearLog = document.querySelector('.clear-log'); + +clearLog.addEventListener('click', () => { + log.textContent = ''; +}); + +function handleEvent(event) { + log.textContent = log.textContent + `${event.type}: ${event.data}\n`; +} + +inputElement.addEventListener('compositionstart', handleEvent); +inputElement.addEventListener('compositionupdate', handleEvent); +inputElement.addEventListener('compositionend', handleEvent); +</pre> + +<h4 id="结果">结果</h4> + +<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="180px" id="frame_Live_example" src="https://mdn.mozillademos.org/en-US/docs/Web/API/Element/compositionstart_event$samples/Live_example?revision=1606277" width="100%"></iframe></p> + +<h2 id="规范">规范</h2> + +<table> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('UI Events', '#event-type-compositionstart')}}</td> + <td>{{Spec2('UI Events')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.Element.compositionstart_event")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>相关事件：{{domxref("Element/compositionend_event", "compositionend")}}, {{domxref("Element/compositionupdate_event", "compositionupdate")}}.</li> +</ul> |