From b62bebd065f27cf6de4a54c10c514087863676f6 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 5 Feb 2022 10:29:48 +0900 Subject: HTMLInputElement のプロパティの記事を移行 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/web/api/htmlinputelement/labels/index.html | 70 ----------- files/ja/web/api/htmlinputelement/labels/index.md | 70 +++++++++++ .../web/api/htmlinputelement/multiple/index.html | 38 ------ .../ja/web/api/htmlinputelement/multiple/index.md | 38 ++++++ .../htmlinputelement/webkitdirectory/index.html | 138 --------------------- .../api/htmlinputelement/webkitdirectory/index.md | 138 +++++++++++++++++++++ 6 files changed, 246 insertions(+), 246 deletions(-) delete mode 100644 files/ja/web/api/htmlinputelement/labels/index.html create mode 100644 files/ja/web/api/htmlinputelement/labels/index.md delete mode 100644 files/ja/web/api/htmlinputelement/multiple/index.html create mode 100644 files/ja/web/api/htmlinputelement/multiple/index.md delete mode 100644 files/ja/web/api/htmlinputelement/webkitdirectory/index.html create mode 100644 files/ja/web/api/htmlinputelement/webkitdirectory/index.md (limited to 'files/ja/web/api/htmlinputelement') diff --git a/files/ja/web/api/htmlinputelement/labels/index.html b/files/ja/web/api/htmlinputelement/labels/index.html deleted file mode 100644 index b5a305f949..0000000000 --- a/files/ja/web/api/htmlinputelement/labels/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: HTMLInputElement.labels -slug: Web/API/HTMLInputElement/labels -tags: -- API -- HTML DOM -- HTMLInputElement -- Property -- Reference -translation_of: Web/API/HTMLInputElement/labels ---- -
{{APIRef("DOM")}}
-

HTMLInputElement.labels は読み取り専用プロパティで、 {{HTMLElement("input")}} 要素に関連付けられた {{HTMLElement("label")}} 要素の {{domxref("NodeList")}} を返します。

- -

構文

- -
var labelElements = input.labels;
-
- -

返値

- -

{{domxref("NodeList")}} で、その <input> 要素に関連付けられた <label> 要素が入ったものです。

- -

例

- -

HTML

- -
<label id="label1" for="test">Label 1</label>
-<input id="test"/>
-<label id="label2" for="test">Label 2</label>
-
- -

JavaScript

- -
window.addEventListener("DOMContentLoaded", function() {
-  const input = document.getElementById("test");
-  for(var i = 0; i < input.labels.length; i++) {
-    console.log(input.labels[i].textContent); // "Label 1" and "Label 2"
-  }
-});
- -

{{EmbedLiveSample("Example", "100%", 30)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("HTML WHATWG", "forms.html#dom-lfe-labels", "labels")}}{{Spec2("HTML WHATWG")}}変更なし
{{SpecName("HTML5 W3C", "forms.html#dom-lfe-labels", "labels")}}{{Spec2("HTML5 W3C")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("api.HTMLInputElement.labels")}}

diff --git a/files/ja/web/api/htmlinputelement/labels/index.md b/files/ja/web/api/htmlinputelement/labels/index.md new file mode 100644 index 0000000000..b5a305f949 --- /dev/null +++ b/files/ja/web/api/htmlinputelement/labels/index.md @@ -0,0 +1,70 @@ +--- +title: HTMLInputElement.labels +slug: Web/API/HTMLInputElement/labels +tags: +- API +- HTML DOM +- HTMLInputElement +- Property +- Reference +translation_of: Web/API/HTMLInputElement/labels +--- +
{{APIRef("DOM")}}
+

HTMLInputElement.labels は読み取り専用プロパティで、 {{HTMLElement("input")}} 要素に関連付けられた {{HTMLElement("label")}} 要素の {{domxref("NodeList")}} を返します。

+ +

構文

+ +
var labelElements = input.labels;
+
+ +

返値

+ +

{{domxref("NodeList")}} で、その <input> 要素に関連付けられた <label> 要素が入ったものです。

+ +

例

+ +

HTML

+ +
<label id="label1" for="test">Label 1</label>
+<input id="test"/>
+<label id="label2" for="test">Label 2</label>
+
+ +

JavaScript

+ +
window.addEventListener("DOMContentLoaded", function() {
+  const input = document.getElementById("test");
+  for(var i = 0; i < input.labels.length; i++) {
+    console.log(input.labels[i].textContent); // "Label 1" and "Label 2"
+  }
+});
+ +

{{EmbedLiveSample("Example", "100%", 30)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("HTML WHATWG", "forms.html#dom-lfe-labels", "labels")}}{{Spec2("HTML WHATWG")}}変更なし
{{SpecName("HTML5 W3C", "forms.html#dom-lfe-labels", "labels")}}{{Spec2("HTML5 W3C")}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("api.HTMLInputElement.labels")}}

diff --git a/files/ja/web/api/htmlinputelement/multiple/index.html b/files/ja/web/api/htmlinputelement/multiple/index.html deleted file mode 100644 index 8415f39c16..0000000000 --- a/files/ja/web/api/htmlinputelement/multiple/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: HTMLInputElement.multiple -slug: Web/API/HTMLInputElement/multiple -translation_of: Web/API/HTMLInputElement/multiple ---- -
{{ APIRef("HTML DOM") }}
- -

HTMLInputElement.multipleはinputタグが複数の値を持つことができるかどうかを示すプロパティです。現在Firefoxでは、multiple属性は<input type="file">でのみサポートされています。

- -

例

- -
// fileInputは<input type=file multiple>であるようなHTML要素です
-var fileInput = document.getElementById("myfileinput");
-
-if (fileInput.multiple == true) {
-
-    for (var i = 0, len = fileInput.files.length; i < len; i++) {
-        // fileInput.filesをループ
-    }
-
-// 一つのファイルのみが有効な場合
-} else {
-    var file = fileInput.files.item(0);
-}
-
- -

関連情報

- - - -

仕様

- - diff --git a/files/ja/web/api/htmlinputelement/multiple/index.md b/files/ja/web/api/htmlinputelement/multiple/index.md new file mode 100644 index 0000000000..8415f39c16 --- /dev/null +++ b/files/ja/web/api/htmlinputelement/multiple/index.md @@ -0,0 +1,38 @@ +--- +title: HTMLInputElement.multiple +slug: Web/API/HTMLInputElement/multiple +translation_of: Web/API/HTMLInputElement/multiple +--- +
{{ APIRef("HTML DOM") }}
+ +

HTMLInputElement.multipleはinputタグが複数の値を持つことができるかどうかを示すプロパティです。現在Firefoxでは、multiple属性は<input type="file">でのみサポートされています。

+ +

例

+ +
// fileInputは<input type=file multiple>であるようなHTML要素です
+var fileInput = document.getElementById("myfileinput");
+
+if (fileInput.multiple == true) {
+
+    for (var i = 0, len = fileInput.files.length; i < len; i++) {
+        // fileInput.filesをループ
+    }
+
+// 一つのファイルのみが有効な場合
+} else {
+    var file = fileInput.files.item(0);
+}
+
+ +

関連情報

+ + + +

仕様

+ + diff --git a/files/ja/web/api/htmlinputelement/webkitdirectory/index.html b/files/ja/web/api/htmlinputelement/webkitdirectory/index.html deleted file mode 100644 index 4adb0120dd..0000000000 --- a/files/ja/web/api/htmlinputelement/webkitdirectory/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: HTMLInputElement.webkitDirectory -slug: Web/API/HTMLInputElement/webkitDirectory -tags: - - API - - File System API - - File and Directory Entries API - - Files - - HTML DOM - - HTMLInputElement - - Non-standard - - Property - - Reference - - Web - - webkitdirectory - - プロパティ -translation_of: Web/API/HTMLInputElement/webkitdirectory ---- -

{{APIRef("HTML DOM")}}{{non-standard_header}}

- -

HTMLInputElement.webkitDirectory プロパティで、 {{htmlattrxref("webkitdirectory", "input")}} という HTML 属性の値を反映し、 {{HTMLElement("input")}} 要素によってユーザーがファイルの代わりにディレクトリを選択できることを示します。ディレクトリが選択された場合、ディレクトリとその内容の階層構造が選択されたアイテムのセットに含まれます。選択されているファイルシステムのファイルアイテムは、 {{domxref("HTMLInputElement.webkitEntries", "webkitEntries")}} を使用して受け取ることができます。

- -

構文

- -
 HTMLInputElement.webkitdirectory = boolValue
- -

値

- -

論理型で、 true は {{HTMLElement("input")}} 要素がディレクトリの身を選択することができることを、 false はファイルのみが選択できることを示します。

- -

結果を理解する

- -

ユーザーが選択を行った後、 files の中のそれぞれの {{domxref("File")}} オブジェクトは各自が {{domxref("File.webkitRelativePath")}} プロパティセットを持ち、ファイルが所在する位置が選択されたディレクトリの中の相対パスで設定されます。例えば、次のようなファイルシステムを考えてみてください。

- - - -

ユーザーが PhotoAlbums を選択すると、 files によって報告されるリストは上記のすべてのファイルに対する {{domxref("File")}} オブジェクトを含みます。 — しかし、ディレクトリは含みません。 PIC2343.jpg のエントリでは webkitRelativePath が PhotoAlbums/Birthdays/Don's 40th birthday/PIC2343.jpg となりますこれによって {{domxref("FileList")}} がフラットでも階層構造を知ることができます。

- -
-

メモ: webkitRelativePath の挙動は Chromium < 72 では異なります。詳しくはこのバグを参照してください。

-
- -

例

- -

この例では、ユーザーが1つまたは複数のディレクトリを選択することができるディレクトリピッカーが表示されます。 {{event("change")}} イベントが発生すると、選択されたディレクトリ階層ないのすべてのファイルを含むリストが生成され、表示されます。

- -

HTML content

- -
<input type="file" id="filepicker" name="fileList" webkitdirectory multiple />
-<ul id="listing"></ul>
- -

JavaScript content

- -
document.getElementById("filepicker").addEventListener("change", function(event) {
-  let output = document.getElementById("listing");
-  let files = event.target.files;
-
-  for (let i=0; i<files.length; i++) {
-    let item = document.createElement("li");
-    item.innerHTML = files[i].webkitRelativePath;
-    output.appendChild(item);
-  };
-}, false);
-
- -

結果

- -

{{ EmbedLiveSample('Example') }}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('File System API', '#dom-htmlinputelement-webkitdirectory', 'webkitdirectory') }}{{ Spec2('File System API') }}初回定義
- -

This API has no official W3C or WHATWG specification.

- -

ブラウザーの互換性

- -

{{Compat("api.HTMLInputElement.webkitdirectory")}}

- -

関連情報

- - diff --git a/files/ja/web/api/htmlinputelement/webkitdirectory/index.md b/files/ja/web/api/htmlinputelement/webkitdirectory/index.md new file mode 100644 index 0000000000..4adb0120dd --- /dev/null +++ b/files/ja/web/api/htmlinputelement/webkitdirectory/index.md @@ -0,0 +1,138 @@ +--- +title: HTMLInputElement.webkitDirectory +slug: Web/API/HTMLInputElement/webkitDirectory +tags: + - API + - File System API + - File and Directory Entries API + - Files + - HTML DOM + - HTMLInputElement + - Non-standard + - Property + - Reference + - Web + - webkitdirectory + - プロパティ +translation_of: Web/API/HTMLInputElement/webkitdirectory +--- +

{{APIRef("HTML DOM")}}{{non-standard_header}}

+ +

HTMLInputElement.webkitDirectory プロパティで、 {{htmlattrxref("webkitdirectory", "input")}} という HTML 属性の値を反映し、 {{HTMLElement("input")}} 要素によってユーザーがファイルの代わりにディレクトリを選択できることを示します。ディレクトリが選択された場合、ディレクトリとその内容の階層構造が選択されたアイテムのセットに含まれます。選択されているファイルシステムのファイルアイテムは、 {{domxref("HTMLInputElement.webkitEntries", "webkitEntries")}} を使用して受け取ることができます。

+ +

構文

+ +
 HTMLInputElement.webkitdirectory = boolValue
+ +

値

+ +

論理型で、 true は {{HTMLElement("input")}} 要素がディレクトリの身を選択することができることを、 false はファイルのみが選択できることを示します。

+ +

結果を理解する

+ +

ユーザーが選択を行った後、 files の中のそれぞれの {{domxref("File")}} オブジェクトは各自が {{domxref("File.webkitRelativePath")}} プロパティセットを持ち、ファイルが所在する位置が選択されたディレクトリの中の相対パスで設定されます。例えば、次のようなファイルシステムを考えてみてください。

+ + + +

ユーザーが PhotoAlbums を選択すると、 files によって報告されるリストは上記のすべてのファイルに対する {{domxref("File")}} オブジェクトを含みます。 — しかし、ディレクトリは含みません。 PIC2343.jpg のエントリでは webkitRelativePath が PhotoAlbums/Birthdays/Don's 40th birthday/PIC2343.jpg となりますこれによって {{domxref("FileList")}} がフラットでも階層構造を知ることができます。

+ +
+

メモ: webkitRelativePath の挙動は Chromium < 72 では異なります。詳しくはこのバグを参照してください。

+
+ +

例

+ +

この例では、ユーザーが1つまたは複数のディレクトリを選択することができるディレクトリピッカーが表示されます。 {{event("change")}} イベントが発生すると、選択されたディレクトリ階層ないのすべてのファイルを含むリストが生成され、表示されます。

+ +

HTML content

+ +
<input type="file" id="filepicker" name="fileList" webkitdirectory multiple />
+<ul id="listing"></ul>
+ +

JavaScript content

+ +
document.getElementById("filepicker").addEventListener("change", function(event) {
+  let output = document.getElementById("listing");
+  let files = event.target.files;
+
+  for (let i=0; i<files.length; i++) {
+    let item = document.createElement("li");
+    item.innerHTML = files[i].webkitRelativePath;
+    output.appendChild(item);
+  };
+}, false);
+
+ +

結果

+ +

{{ EmbedLiveSample('Example') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('File System API', '#dom-htmlinputelement-webkitdirectory', 'webkitdirectory') }}{{ Spec2('File System API') }}初回定義
+ +

This API has no official W3C or WHATWG specification.

+ +

ブラウザーの互換性

+ +

{{Compat("api.HTMLInputElement.webkitdirectory")}}

+ +

関連情報

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