diff options
Diffstat (limited to 'files/zh-cn/web/api/element')
| -rw-r--r-- | files/zh-cn/web/api/element/compositionstart_event/index.html | 16 |
1 files changed, 10 insertions, 6 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 index 3997c0b7b1..c84ce8a537 100644 --- a/files/zh-cn/web/api/element/compositionstart_event/index.html +++ b/files/zh-cn/web/api/element/compositionstart_event/index.html @@ -11,6 +11,8 @@ tags: translation_of: Web/API/Element/compositionstart_event original_slug: Web/Events/compositionstart --- +<div>{{APIRef}}</div> + <p>文本合成系统如 {{glossary("input method editor")}}（即输入法编辑器）开始新的输入合成时会触发 <strong><code>compositionstart</code></strong> 事件。</p> <p>例如，当用户使用拼音输入法开始输入汉字时，这个事件就会被触发。</p> @@ -52,11 +54,11 @@ inputElement.addEventListener('compositionstart', (event) => { console.log(`generated characters were: ${event.data}`); });</pre> -<h3 id="动态演示">动态演示</h3> +<h3 id="Live_example">动态演示</h3> <h4 id="HTML">HTML</h4> -<pre><div class="control"> +<pre class="brush: html"><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> @@ -67,9 +69,10 @@ inputElement.addEventListener('compositionstart', (event) => { <button class="clear-log">Clear</button> </div></pre> +<div class="hidden"> <h4 id="CSS">CSS</h4> -<pre>body { +<pre class="brush: css">body { padding: .2rem; display: grid; grid-template-areas: "control log"; @@ -101,10 +104,11 @@ kbd { border: 1px solid black; } </pre> +</div> <h4 id="JS">JS</h4> -<pre>const inputElement = document.querySelector('input[type="text"]'); +<pre class="brush: js">const inputElement = document.querySelector('input[type="text"]'); const log = document.querySelector('.event-log-contents'); const clearLog = document.querySelector('.clear-log'); @@ -123,7 +127,7 @@ inputElement.addEventListener('compositionend', handleEvent); <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> +<p>{{ EmbedLiveSample('Live_example', '100%', '180px') }}</p> <h2 id="规范">规范</h2> @@ -144,7 +148,7 @@ inputElement.addEventListener('compositionend', handleEvent); <h2 id="浏览器兼容性">浏览器兼容性</h2> -<p>{{Compat("api.Element.compositionstart_event")}}</p> +<p>{{Compat}}</p> <h2 id="参见">参见</h2> |