diff options
Diffstat (limited to 'files/zh-cn/web/api')
3 files changed, 22 insertions, 58 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> diff --git a/files/zh-cn/web/api/htmlinputelement/invalid_event/index.html b/files/zh-cn/web/api/htmlinputelement/invalid_event/index.html index 6f1f97a94d..d047f1e5a0 100644 --- a/files/zh-cn/web/api/htmlinputelement/invalid_event/index.html +++ b/files/zh-cn/web/api/htmlinputelement/invalid_event/index.html @@ -35,11 +35,11 @@ translation_of: Web/API/HTMLInputElement/invalid_event </tbody> </table> -<p>这个事件可用于展示提交表单时所出现的问题的概览。当表单提交时，若任一表单控件无效，则会触发 <code>invalid</code> 事件。对可提交元素有效性的检查是在提交父元素 {{HtmlElement("form")}} 之前或调用父元素 <code><form></code> 或元素自己的 <a href="/en-US/docs/HTML/Forms_in_HTML#Constraint_Validation_API" title="/en-US/docs/HTML/Forms_in_HTML#Constraint_Validation_API"><code>checkValidity()</code></a> 方法之后。</p> +<p>这个事件可用于展示提交表单时所出现的问题的概览。当表单提交时，若任一表单控件无效，则会触发 <code>invalid</code> 事件。对可提交元素有效性的检查是在提交父元素 {{HtmlElement("form")}} 之前或调用父元素 <code><form></code> 或元素自己的 <a href="/en-US/docs/Learn/Forms#constraint_validation_api" title="/en-US/docs/HTML/Forms_in_HTML#Constraint_Validation_API"><code>checkValidity()</code></a> 方法之后。</p> <p>这个事件不会在 {{Event("blur")}} 事件中触发。</p> -<h2 id="示例">示例</h2> +<h2 id="Examples">示例</h2> <p>如果表单提交时有无效值，检查可提交元素时发现了错误，则 <code>invalid</code> 事件会在那个无效元素上触发。在这个例子中，当输入无效值触发 <code>invalid</code> 事件时，这个无效值被记录下来。</p> @@ -65,40 +65,15 @@ function logValue(e) { <h3 id="结果">结果</h3> -<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" id="frame_Examples" src="https://mdn.mozillademos.org/en-US/docs/Web/API/HTMLInputElement/invalid_event$samples/Examples?revision=1602988"></iframe></p> +<p>{{EmbedLiveSample("Examples")}}</p> <h2 id="规范">规范</h2> -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">规范</th> - <th scope="col">状态</th> - <th scope="col">注释</th> - </tr> - <tr> - <td>{{ SpecName('HTML WHATWG', 'forms.html#the-constraint-validation-api', 'Invalid event') }}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{ SpecName('HTML5.1', 'sec-forms.html#the-constraint-validation-api', 'Invalid event') }}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{ SpecName('HTML5 W3C', 'forms.html#the-constraint-validation-api', 'Invalid event') }}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> +{{Specifications}} <h2 id="浏览器兼容性">浏览器兼容性</h2> - - -<p>{{Compat("api.HTMLInputElement.invalid_event")}}</p> +<p>{{Compat}}</p> <h2 id="参见">参见</h2> diff --git a/files/zh-cn/web/api/range/getboundingclientrect/index.html b/files/zh-cn/web/api/range/getboundingclientrect/index.html index 4c10f536b0..d49eb8c65c 100644 --- a/files/zh-cn/web/api/range/getboundingclientrect/index.html +++ b/files/zh-cn/web/api/range/getboundingclientrect/index.html @@ -22,16 +22,16 @@ translation_of: Web/API/Range/getBoundingClientRect <pre class="syntaxbox notranslate"><var>boundingRect</var> = <var>range</var>.getBoundingClientRect() </pre> -<h2 id="示例">示例</h2> +<h2 id="Example">示例</h2> <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div id="highlight"></div> +<pre class="brush: html "><div id="highlight"></div> <p>This example positions a "highlight" rectangle behind the contents of a range. The range's content <b>starts here</b> and continues on until it <b>ends here</b>. The bounding client rectangle contains everything selected in the range.</p></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">#highlight { +<pre class="brush: css">#highlight { background: yellow; position: absolute; z-index: -1; @@ -43,7 +43,7 @@ p { <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js notranslate">const range = document.createRange(); +<pre class="brush: js">const range = document.createRange(); range.setStartBefore(document.getElementsByTagName('b').item(0), 0); range.setEndAfter(document.getElementsByTagName('b').item(1), 0); @@ -56,30 +56,15 @@ highlight.style.height = `${clientRect.height}px`;</pre> <h3 id="结果">结果</h3> -<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" id="frame_Example" src="https://mdn.mozillademos.org/en-US/docs/Web/API/Range/getBoundingClientRect$samples/Example?revision=1549349"></iframe></p> +<p>{{EmbedLiveSample("Example")}}</p> <h2 id="规范">规范</h2> -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">规范</th> - <th scope="col">状态</th> - <th scope="col">备注</th> - </tr> - <tr> - <td>{{SpecName('CSSOM View', '#dom-range-getboundingclientrect', 'Range.getBoundingClientRect()')}}</td> - <td>{{Spec2('CSSOM View')}}</td> - <td>Initial specification.</td> - </tr> - </tbody> -</table> +{{Specifications}} <h2 id="浏览器兼容性">浏览器兼容性</h2> - - -<p>{{Compat("api.Range.getBoundingClientRect")}}</p> +<p>{{Compat}}</p> <h2 id="参见">参见</h2> |