From d490e42ffe823173477b841ec397105bd06cb336 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Thu, 17 Jun 2021 13:35:36 -0400 Subject: rid of $samples iframes --- .../api/element/compositionstart_event/index.html | 16 ++++++---- .../api/htmlinputelement/invalid_event/index.html | 35 ++++------------------ .../web/api/range/getboundingclientrect/index.html | 29 +++++------------- 3 files changed, 22 insertions(+), 58 deletions(-) (limited to 'files/zh-cn/web/api') 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 --- +
{{APIRef}}
+

文本合成系统如 {{glossary("input method editor")}}（即输入法编辑器）开始新的输入合成时会触发 compositionstart 事件。

例如，当用户使用拼音输入法开始输入汉字时，这个事件就会被触发。

@@ -52,11 +54,11 @@ inputElement.addEventListener('compositionstart', (event) => { console.log(`generated characters were: ${event.data}`); }); -

动态演示

+

动态演示

HTML

-
<div class="control">
+
<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>

 
+
 
 
JS

 
-
const inputElement = document.querySelector('input[type="text"]');
+
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);
 
 
结果

 
-

+
{{ EmbedLiveSample('Live_example', '100%', '180px') }}

 
 
规范

 
@@ -144,7 +148,7 @@ inputElement.addEventListener('compositionend', handleEvent);
 
 
浏览器兼容性

 
-
{{Compat("api.Element.compositionstart_event")}}

+
{{Compat}}

 
 
参见

 
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
  
 
 
-
这个事件可用于展示提交表单时所出现的问题的概览。当表单提交时，若任一表单控件无效，则会触发 invalid 事件。对可提交元素有效性的检查是在提交父元素 {{HtmlElement("form")}} 之前或调用父元素 <form> 或元素自己的 checkValidity() 方法之后。

+
这个事件可用于展示提交表单时所出现的问题的概览。当表单提交时，若任一表单控件无效，则会触发 invalid 事件。对可提交元素有效性的检查是在提交父元素 {{HtmlElement("form")}} 之前或调用父元素 <form> 或元素自己的 checkValidity() 方法之后。

 
 
这个事件不会在 {{Event("blur")}} 事件中触发。

 
-
示例

+
示例

 
 
如果表单提交时有无效值，检查可提交元素时发现了错误，则 invalid 事件会在那个无效元素上触发。在这个例子中，当输入无效值触发 invalid 事件时，这个无效值被记录下来。

 
@@ -65,40 +65,15 @@ function logValue(e) {
 
 
结果

 
-

+
{{EmbedLiveSample("Examples")}}

 
 
规范

 
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
规范状态注释
{{ SpecName('HTML WHATWG', 'forms.html#the-constraint-validation-api', 'Invalid event') }}{{Spec2('HTML WHATWG')}}
{{ SpecName('HTML5.1', 'sec-forms.html#the-constraint-validation-api', 'Invalid event') }}{{Spec2('HTML5.1')}}
{{ SpecName('HTML5 W3C', 'forms.html#the-constraint-validation-api', 'Invalid event') }}{{Spec2('HTML5 W3C')}}

+{{Specifications}}
 
 
浏览器兼容性

 
-
-
-
{{Compat("api.HTMLInputElement.invalid_event")}}

+
{{Compat}}

 
 
参见

 
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
 
boundingRect = range.getBoundingClientRect()
 

 
-
示例

+
示例

 
 
HTML

 
-
<div id="highlight"></div>
+
<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>

 
 
CSS

 
-
#highlight {
+
#highlight {
   background: yellow;
   position: absolute;
   z-index: -1;
@@ -43,7 +43,7 @@ p {
 
 
JavaScript

 
-
const range = document.createRange();
+
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`;

 
 
结果

 
-

+
{{EmbedLiveSample("Example")}}

 
 
规范

 
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
规范状态备注
{{SpecName('CSSOM View', '#dom-range-getboundingclientrect', 'Range.getBoundingClientRect()')}}{{Spec2('CSSOM View')}}Initial specification.

+{{Specifications}}
 
 
浏览器兼容性

 
-
-
-
{{Compat("api.Range.getBoundingClientRect")}}

+
{{Compat}}

 
 
参见

 
-- 
cgit v1.2.3-54-g00ecf