From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/api/htmlorforeignelement/blur/index.html | 88 ++++++++++++ .../api/htmlorforeignelement/dataset/index.html | 148 +++++++++++++++++++ .../web/api/htmlorforeignelement/focus/index.html | 160 +++++++++++++++++++++ files/ja/web/api/htmlorforeignelement/index.html | 60 ++++++++ .../web/api/htmlorforeignelement/nonce/index.html | 53 +++++++ .../api/htmlorforeignelement/tabindex/index.html | 86 +++++++++++ 6 files changed, 595 insertions(+) create mode 100644 files/ja/web/api/htmlorforeignelement/blur/index.html create mode 100644 files/ja/web/api/htmlorforeignelement/dataset/index.html create mode 100644 files/ja/web/api/htmlorforeignelement/focus/index.html create mode 100644 files/ja/web/api/htmlorforeignelement/index.html create mode 100644 files/ja/web/api/htmlorforeignelement/nonce/index.html create mode 100644 files/ja/web/api/htmlorforeignelement/tabindex/index.html (limited to 'files/ja/web/api/htmlorforeignelement') diff --git a/files/ja/web/api/htmlorforeignelement/blur/index.html b/files/ja/web/api/htmlorforeignelement/blur/index.html new file mode 100644 index 0000000000..8a9cea1f8c --- /dev/null +++ b/files/ja/web/api/htmlorforeignelement/blur/index.html @@ -0,0 +1,88 @@ +--- +title: HTMLElement.blur() +slug: Web/API/HTMLOrForeignElement/blur +tags: + - API + - HTML DOM + - HTMLElement + - Method + - Reference +translation_of: Web/API/HTMLOrForeignElement/blur +--- +
{{ APIRef("HTML DOM") }}
+ +

HTMLElement.blur() メソッドは、現在の要素からキーボードフォーカスを取り除きます。

+ +

構文

+ +
element.blur();
+ +

例

+ +

テキスト入力からフォーカスを取り除く

+ +

HTML

+ +
<input type="text" id="myText" value="サンプルテキスト">
+<br><br>
+<button type="button" onclick="focusInput()">クリックするとフォーカスを得ます</button>
+<button type="button" onclick="blurInput()">クリックするとフォーカスを失います</button>
+ +

JavaScript

+ +
function focusInput() {
+  document.getElementById('myText').focus();
+}
+function blurInput() {
+  document.getElementById('myText').blur();
+}
+ +

結果

+ +

{{ EmbedLiveSample('Remove_focus_from_a_text_input') }}

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', 'editing.html#dom-blur', 'blur')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'editing.html#blur()-0', 'blur')}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', 'editing.html#dom-blur', 'blur')}}{{Spec2('HTML5 W3C')}}
{{SpecName('DOM2 HTML', 'html.html#ID-28216144', 'blur')}}{{Spec2('DOM2 HTML')}}
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlorforeignelement/dataset/index.html b/files/ja/web/api/htmlorforeignelement/dataset/index.html new file mode 100644 index 0000000000..6176dbb174 --- /dev/null +++ b/files/ja/web/api/htmlorforeignelement/dataset/index.html @@ -0,0 +1,148 @@ +--- +title: HTMLOrForeignElement.dataset +slug: Web/API/HTMLOrForeignElement/dataset +tags: + - API + - HTML DOM + - HTMLElement + - HTMLOrForeignElement + - Property + - Read-only + - Reference + - SVG + - SVG Custom Attributes + - SVG2 + - SVGElement + - dataset + - プロパティ + - 読取専用 +translation_of: Web/API/HTMLOrForeignElement/dataset +--- +
{{APIRef("HTML DOM")}}
+ +

dataset は {{DOMxRef("HTMLOrForeignElement")}} インターフェイスのプロパティで、要素に設定されたすべてのカスタムデータ属性 (data-*) への読み取り/書き込みアクセスを提供します。 このアクセスは、 HTML と DOM の両方の中で利用できます。これは {{domxref("DOMString")}} のマップ ({{domxref("DOMStringMap")}}) で、1つのカスタムデータ属性が1つのエントリに対応します。なお、 dataset プロパティ自体は読み取ることができますが、直接書き込むことはできません。代わりに、すべての書き込みは dataset 内の個々のプロパティに対して行われる必要があり、それはデータ属性を表します。また、 HTML の data-属性とそれに対応する DOM dataset.プロパティ　は同じ名前を共有しませんが、次のように常に近いものになります。

+ + + +

以下の情報に加えて、データ属性の使用の記事に、HTML データ属性の使用方法に関するガイドがあります。

+ +

名前変換

+ +

ダッシュスタイルからキャメルケースへ: カスタムデータ属性名は、次のルールに従って {{ domxref("DOMStringMap") }} エントリのキーに変換されます。

+ + + +

キャメルケースからダッシュスタイルへ: キーを属性名にマッピングする逆の変換では、次のルールが使用されます。

+ + + +

上記の規則の制約事項により、2つの変換が互いに逆変換になります。

+ +

例えば、data-abc-def という名前の属性は、キー abcDef に対応します。

+ + + +

値へのアクセス

+ + + +

値の設定

+ + + +

構文

+ +
const dataAttrMap = element.dataset
+
+ +

値

+ +

{{domxref("DOMStringMap")}} です。

+ +

例

+ +
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>
+ +
const el = document.querySelector('#user');
+
+// el.id === 'user'
+// el.dataset.id === '1234567890'
+// el.dataset.user === 'johndoe'
+// el.dataset.dateOfBirth === ''
+
+// データ属性の設定
+el.dataset.dateOfBirth = '1960-10-03';
+// 結果: el.dataset.dateOfBirth === 1960-10-03
+
+delete el.dataset.dateOfBirth;
+// 結果: el.dataset.dateOfBirth === undefined
+
+// 'someDataAttr' in el.dataset === false
+el.dataset.someDataAttr = 'mydata';
+// 結果: 'someDataAttr' in el.dataset === true
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML WHATWG')}}最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし
{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5.1')}}{{SpecName('HTML WHATWG')}} のスナップショット、 {{SpecName('HTML5 W3C')}} からの変更なし
{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5 W3C')}}{{SpecName('HTML WHATWG')}} のスナップショット、初回定義
+ +

ブラウザーの互換性

+ + + +

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

+ + + +

関連情報

+ + diff --git a/files/ja/web/api/htmlorforeignelement/focus/index.html b/files/ja/web/api/htmlorforeignelement/focus/index.html new file mode 100644 index 0000000000..2680fd8658 --- /dev/null +++ b/files/ja/web/api/htmlorforeignelement/focus/index.html @@ -0,0 +1,160 @@ +--- +title: HTMLElement.focus() +slug: Web/API/HTMLOrForeignElement/focus +tags: + - API + - Focus + - HTML DOM + - HTMLElement + - Method + - Reference + - Scroll + - View + - activate +translation_of: Web/API/HTMLOrForeignElement/focus +--- +
{{ APIRef("HTML DOM") }}
+ +

HTMLElement.focus() メソッドは、指定された要素にフォーカスを設定できる場合、フォーカスを設定します。 フォーカスされた要素は、デフォルトでキーボードや同様のイベントを受け取る要素です。

+ +

構文

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

パラメーター

+ +
+
options {{optional_inline}}
+
フォーカスプロセスの側面を制御するオプションを提供するオプションのオブジェクト。 このオブジェクトには、次のプロパティが含まれる場合があります。
+
+
+
preventScroll {{optional_inline}}
+
ブラウザーがドキュメントをスクロールして、新しくフォーカスされた要素を表示するかどうかを示す Boolean の値。 preventScroll の値が false（デフォルト）の場合、ブラウザーは要素をフォーカスした後、その要素をスクロールして表示します。 preventScroll が true に設定されている場合、スクロールしません。
+
+
+
+ +

例

+ +

テキストフィールドにフォーカスする

+ +

JavaScript

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

HTML

+ +
<input type="text" id="myTextField" value="テキストフィールド">
+<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">クリックしてください！</button>
+<p></p>
+<button type="button" onclick="focusMethod()">クリックしてボタンにフォーカスしてください！</button>
+
+ +

結果

+ +

{{ EmbedLiveSample('Focus_on_a_button') }}

+ +

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()">クリックしてボタンにフォーカスしてください！</button>
+<button type="button" onclick="focusNoScrollMethod()">クリックしてスクロールせずにボタンにフォーカスしてください！</button>
+
+<div id="container" style="height: 1000px; width: 1000px;">
+<button type="button" id="myButton" style="margin-top: 500px;">クリックしてください！</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')}}
+ +

ノート

+ +

mousedown イベントハンドラから HTMLElement.focus() を呼び出す場合は、event.preventDefault() を呼び出して、フォーカスがその HTMLElement から離れないようにする必要があります。

+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlorforeignelement/index.html b/files/ja/web/api/htmlorforeignelement/index.html new file mode 100644 index 0000000000..6e9c373051 --- /dev/null +++ b/files/ja/web/api/htmlorforeignelement/index.html @@ -0,0 +1,60 @@ +--- +title: HTMLOrForeignElement +slug: Web/API/HTMLOrForeignElement +tags: + - API + - HTML + - HTMLElement + - HTMLOrForeignElement + - Interface + - MathML + - MathMLElement + - Mixin + - Reference + - SVG + - SVGElement + - ミックスイン +translation_of: Web/API/HTMLOrForeignElement +--- +
{{APIRef("HTML DOM")}}{{Draft}}
+ +

HTMLOrForeignElement ミックスインは、 {{DOMxRef("HTMLElement")}}, {{DOMxRef("SVGElement")}}, {{DOMxRef("MathMLElement")}} の各インターフェイスで共通のいくつかの機能を説明します。これらのインターフェイスは、もちろん、以下の列挙したものに加えたものに加えてもっと機能があります。

+ +
+

メモ: HTMLOrForeignElement はミックスインであり、インターフェイスではありません。実際に HTMLOrForeignElement 型のオブジェクトを生成することはできません。

+
+ +
{{InterfaceOverview("HTML DOM")}}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("HTML WHATWG", "dom.html#htmlorsvgelement", 'HTMLOrForeignElement')}}{{Spec2('HTML WHATWG')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLOrForeignElement")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlorforeignelement/nonce/index.html b/files/ja/web/api/htmlorforeignelement/nonce/index.html new file mode 100644 index 0000000000..c91021d641 --- /dev/null +++ b/files/ja/web/api/htmlorforeignelement/nonce/index.html @@ -0,0 +1,53 @@ +--- +title: HTMLOrForeignElement.nonce +slug: Web/API/HTMLOrForeignElement/nonce +tags: + - API + - Content Security Policy + - Experimental + - HTML DOM + - HTMLElement + - Property + - Reference + - nonce +translation_of: Web/API/HTMLOrForeignElement/nonce +--- +
{{APIRef("HTML DOM")}}{{SeeCompatTable}}
+ +

nonce は {{DOMxRef("HTMLOrForeignElement")}} のプロパティで、特定のフェッチを続行できるかどうかを決定するためにコンテンツセキュリティポリシー（Content Security Policy）で使用される暗号化番号を返します。

+ +

後の実装では、nonce 属性を持つ要素はスクリプトにのみ公開します（CSS 属性セレクターのようなサイドチャネルには公開しません）。

+ +

構文

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

値

+ +

暗号化ナンス（cryptographic nonce）。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG','#attr-nonce','nonce')}}{{Spec2('HTML WHATWG')}}初回定義
+ +

ブラウザーの互換性

+ + + +

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

diff --git a/files/ja/web/api/htmlorforeignelement/tabindex/index.html b/files/ja/web/api/htmlorforeignelement/tabindex/index.html new file mode 100644 index 0000000000..f191f13381 --- /dev/null +++ b/files/ja/web/api/htmlorforeignelement/tabindex/index.html @@ -0,0 +1,86 @@ +--- +title: HTMLOrForeignElement.tabIndex +slug: Web/API/HTMLOrForeignElement/tabIndex +tags: + - API + - HTML DOM + - HTMLElement + - HTMLOrForeignElement + - Property + - Reference + - tabIndex +translation_of: Web/API/HTMLOrForeignElement/tabIndex +--- +
{{APIRef("HTML DOM")}}
+ +

tabIndex は {{DOMxRef("HTMLOrForeignElement")}} インターフェイスのプロパティで、現在の要素のタブの順序を表します。

+ +

タブの順序は次のとおりです。

+ +
    +
  1. 正の tabIndex を持つ要素。 同一の tabIndex を持つ要素は、表示された順序でナビゲートすべきです。 ナビゲーションは、最も低い tabIndex から最も高い tabIndex に進みます
    2. +
  2. tabIndex 属性をサポートしていない要素、または tabIndex 属性をサポートし、 tabIndex を 0 に割り当てる要素は、それらが表示された順序で。
    3. +
+ +

無効になっている要素は、タブの順序に関与しません。

+ +

値は逐次的である必要はなく、特定の値で始まる必要もありません。 各ブラウザーは非常に大きな値を切り取りますが、値は負である場合もあります。

+ +

構文

+ +
element.tabIndex = index;
+var index = element.tabIndex;
+
+ +

値

+ +

index は整数です。

+ +

例

+ +
const b1 = document.getElementById('button1');
+
+b1.tabIndex = 1;
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#dom-tabindex', 'tabindex')}}{{Spec2('HTML WHATWG')}}{{SpecName('DOM2 HTML')}} からの変更なし。
{{SpecName('DOM2 HTML', 'html.html#ID-40676705', 'tabindex')}}{{Spec2('DOM2 HTML')}}{{SpecName('DOM1')}} からの変更なし。
{{SpecName('DOM1', 'level-one-html.html#ID-40676705', 'tabindex')}}{{Spec2('DOM1')}}初回定義
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf