From 3ea6a4b2df21b7789f5183c30d99330597528163 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 5 Feb 2022 10:30:58 +0900 Subject: HTMLInputElement のメソッドを移行 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mozgetfilenamearray/index.html | 47 --------- .../htmlinputelement/mozgetfilenamearray/index.md | 47 +++++++++ .../ja/web/api/htmlinputelement/select/index.html | 83 --------------- files/ja/web/api/htmlinputelement/select/index.md | 83 +++++++++++++++ .../api/htmlinputelement/setrangetext/index.html | 101 ------------------ .../web/api/htmlinputelement/setrangetext/index.md | 101 ++++++++++++++++++ .../htmlinputelement/setselectionrange/index.html | 115 --------------------- .../htmlinputelement/setselectionrange/index.md | 115 +++++++++++++++++++++ 8 files changed, 346 insertions(+), 346 deletions(-) delete mode 100644 files/ja/web/api/htmlinputelement/mozgetfilenamearray/index.html create mode 100644 files/ja/web/api/htmlinputelement/mozgetfilenamearray/index.md delete mode 100644 files/ja/web/api/htmlinputelement/select/index.html create mode 100644 files/ja/web/api/htmlinputelement/select/index.md delete mode 100644 files/ja/web/api/htmlinputelement/setrangetext/index.html create mode 100644 files/ja/web/api/htmlinputelement/setrangetext/index.md delete mode 100644 files/ja/web/api/htmlinputelement/setselectionrange/index.html create mode 100644 files/ja/web/api/htmlinputelement/setselectionrange/index.md (limited to 'files/ja/web') diff --git a/files/ja/web/api/htmlinputelement/mozgetfilenamearray/index.html b/files/ja/web/api/htmlinputelement/mozgetfilenamearray/index.html deleted file mode 100644 index 4148d4abf4..0000000000 --- a/files/ja/web/api/htmlinputelement/mozgetfilenamearray/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: HTMLInputElement.mozGetFileNameArray() -slug: Web/API/HTMLInputElement/mozGetFileNameArray -translation_of: Web/API/HTMLInputElement/mozGetFileNameArray ---- -
{{ APIRef("HTML DOM") }}{{Non-standard_header}}
- -

HTMLInputElement.mozGetFileNameArray()メソッドはHTMLのinput要素上でユーザーによって選択されたファイルの名前の配列を返します。

- -
Note: このメソッドはGeckoに特有のものであり、他のブラウザでは利用できません。加えて、Webページで利用した場合にエラーが発生します。
- -

構文

- -
inputElement.mozGetFileNameArray(aLength, aFileNames);
-
- -

パラメーター

- -
-
aLength
-
If specified, will receive the number of file names in the returned array.
-
aFileNames
-
Is an array into which the file names are placed.
-
- - - -

例

- -
var numFiles = 0;
-var fileArray = {};
-
-inputElement.mozGetFileNameArray(numFiles, fileArray);
-
- -

仕様

- -

Mozillaに特有のメソッドであり、どの仕様にも書かれていません。

- -

関連情報

- - diff --git a/files/ja/web/api/htmlinputelement/mozgetfilenamearray/index.md b/files/ja/web/api/htmlinputelement/mozgetfilenamearray/index.md new file mode 100644 index 0000000000..4148d4abf4 --- /dev/null +++ b/files/ja/web/api/htmlinputelement/mozgetfilenamearray/index.md @@ -0,0 +1,47 @@ +--- +title: HTMLInputElement.mozGetFileNameArray() +slug: Web/API/HTMLInputElement/mozGetFileNameArray +translation_of: Web/API/HTMLInputElement/mozGetFileNameArray +--- +
{{ APIRef("HTML DOM") }}{{Non-standard_header}}
+ +

HTMLInputElement.mozGetFileNameArray()メソッドはHTMLのinput要素上でユーザーによって選択されたファイルの名前の配列を返します。

+ +
Note: このメソッドはGeckoに特有のものであり、他のブラウザでは利用できません。加えて、Webページで利用した場合にエラーが発生します。
+ +

構文

+ +
inputElement.mozGetFileNameArray(aLength, aFileNames);
+
+ +

パラメーター

+ +
+
aLength
+
If specified, will receive the number of file names in the returned array.
+
aFileNames
+
Is an array into which the file names are placed.
+
+ + + +

例

+ +
var numFiles = 0;
+var fileArray = {};
+
+inputElement.mozGetFileNameArray(numFiles, fileArray);
+
+ +

仕様

+ +

Mozillaに特有のメソッドであり、どの仕様にも書かれていません。

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlinputelement/select/index.html b/files/ja/web/api/htmlinputelement/select/index.html deleted file mode 100644 index 8dc1137a8d..0000000000 --- a/files/ja/web/api/htmlinputelement/select/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: HTMLInputElement.select() -slug: Web/API/HTMLInputElement/select -tags: - - API - - HTML DOM - - HTMLInputElement - - Method - - Reference -translation_of: Web/API/HTMLInputElement/select ---- -
{{ APIRef("HTML DOM") }}
- -

HTMLInputElement.select() メソッドは、{{HTMLElement("textarea")}} 要素またはテキストフィールドを含む {{HTMLElement("input")}} 要素内のすべてのテキストを選択します。

- -

シンタックス

- -
element.select();
- -

例

- -

この例のボタンをクリックすると、<input> 要素内のすべてのテキストが選択されます。

- -

HTML

- -
<input type="text" id="text-box" size="20" value="Hello world!">
-<button onclick="selectText()">Select text</button>
-
- -

JavaScript

- -
function selectText() {
-  const input = document.getElementById('text-box');
-  input.focus();
-  input.select();
-}
- -

結果

- -

{{EmbedLiveSample("Example")}}

- -

メモ

- -

element.select() を呼んだからといって必ずしも入力がフォーカスされるわけではないので、{{domxref("HTMLElement.focus()")}} で使うことが多いです。

- -

これがサポートされていないブラウザでは、パラメータ 0 と入力値の長さを指定して HTMLInputElement.setSelectionRange() を呼び出すことで置き換えることができます。

- -
<input onClick="this.select();" value="Sample Text" />
-<!-- equivalent to -->
-<input onClick="this.setSelectionRange(0, this.value.length);" value="Sample Text" />
-
- -

仕様

- - - - - - - - - - - - - - - - -
仕様書ステータスコメント
{{SpecName('HTML WHATWG', 'forms.html#dom-textarea/input-select', 'select')}}{{Spec2('HTML WHATWG')}}
- -

ブラウザの互換性

- -

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

- -

あわせて参照

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

HTMLInputElement.select() メソッドは、{{HTMLElement("textarea")}} 要素またはテキストフィールドを含む {{HTMLElement("input")}} 要素内のすべてのテキストを選択します。

+ +

シンタックス

+ +
element.select();
+ +

例

+ +

この例のボタンをクリックすると、<input> 要素内のすべてのテキストが選択されます。

+ +

HTML

+ +
<input type="text" id="text-box" size="20" value="Hello world!">
+<button onclick="selectText()">Select text</button>
+
+ +

JavaScript

+ +
function selectText() {
+  const input = document.getElementById('text-box');
+  input.focus();
+  input.select();
+}
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

メモ

+ +

element.select() を呼んだからといって必ずしも入力がフォーカスされるわけではないので、{{domxref("HTMLElement.focus()")}} で使うことが多いです。

+ +

これがサポートされていないブラウザでは、パラメータ 0 と入力値の長さを指定して HTMLInputElement.setSelectionRange() を呼び出すことで置き換えることができます。

+ +
<input onClick="this.select();" value="Sample Text" />
+<!-- equivalent to -->
+<input onClick="this.setSelectionRange(0, this.value.length);" value="Sample Text" />
+
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様書ステータスコメント
{{SpecName('HTML WHATWG', 'forms.html#dom-textarea/input-select', 'select')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザの互換性

+ +

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

+ +

あわせて参照

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

HTMLInputElement.setRangeText() メソッドを用いて，{{HTMLElement("input")}}や{{HTMLElement("textarea")}}要素において，文章の指定した範囲を新たな文字列で置き換えられます。

- -

構文

- -
element.setRangeText(置換対象);
-element.setRangeText(置換対象, 開始, 終了 [, 選択状態]);
-
- -

引数

- -
-
置換対象
-
挿入する文字列。
-
開始{{optional_inline}}
-
置き換える最初の文字の位置を0始まりで指定します。既定は現在のselectionStartの値（利用者が現在選択している範囲の始め）です。
-
終了{{optional_inline}}
-
置き換える最初の文字の一つ後の位置を0始まりで指定します。既定は現在のselectionEndの値（利用者が現在選択している範囲の終わり）です。
-
選択状態{{optional_inline}}
-
文章が置換された後，選択範囲がどのように振る舞うべきかを指定します。
- 次の値が有効です: -
    -
  • select: 新規挿入した文章を選択する。
    • -
  • start: 挿入した文書の直前に選択範囲を移動する。
    • -
  • end: 挿入した文書の直後に選択範囲を移動する。
    • -
  • preserve: 選択範囲を保持しようとします。既定です。
    • -
-
-
- -

事例

- -

例中のボタンを押して，欄内の文章の一部を置換してみてください。新規挿入された文章は，その後強調（選択）されるでしょう。

- -

HTML

- -
<input type="text" id="text-box" size="18" value="この文章は更新されていません。"/>
-<button onclick="selectText()">文章を更新する</button>
-
- -

JavaScript

- -
function selectText() {
-  const input = document.getElementById('text-box');
-  input.focus();
-  input.setRangeText('ました', 9, 14, 'select');
-}
- -

結果

- -

{{EmbedLiveSample("Example")}}

- -

仕様書

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

ブラウザ互換性

- -
- - -

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

-
- -

関連項目

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

HTMLInputElement.setRangeText() メソッドを用いて，{{HTMLElement("input")}}や{{HTMLElement("textarea")}}要素において，文章の指定した範囲を新たな文字列で置き換えられます。

+ +

構文

+ +
element.setRangeText(置換対象);
+element.setRangeText(置換対象, 開始, 終了 [, 選択状態]);
+
+ +

引数

+ +
+
置換対象
+
挿入する文字列。
+
開始{{optional_inline}}
+
置き換える最初の文字の位置を0始まりで指定します。既定は現在のselectionStartの値（利用者が現在選択している範囲の始め）です。
+
終了{{optional_inline}}
+
置き換える最初の文字の一つ後の位置を0始まりで指定します。既定は現在のselectionEndの値（利用者が現在選択している範囲の終わり）です。
+
選択状態{{optional_inline}}
+
文章が置換された後，選択範囲がどのように振る舞うべきかを指定します。
+ 次の値が有効です: +
    +
  • select: 新規挿入した文章を選択する。
    • +
  • start: 挿入した文書の直前に選択範囲を移動する。
    • +
  • end: 挿入した文書の直後に選択範囲を移動する。
    • +
  • preserve: 選択範囲を保持しようとします。既定です。
    • +
+
+
+ +

事例

+ +

例中のボタンを押して，欄内の文章の一部を置換してみてください。新規挿入された文章は，その後強調（選択）されるでしょう。

+ +

HTML

+ +
<input type="text" id="text-box" size="18" value="この文章は更新されていません。"/>
+<button onclick="selectText()">文章を更新する</button>
+
+ +

JavaScript

+ +
function selectText() {
+  const input = document.getElementById('text-box');
+  input.focus();
+  input.setRangeText('ました', 9, 14, 'select');
+}
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様書

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

ブラウザ互換性

+ +
+ + +

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

+
+ +

関連項目

+ + diff --git a/files/ja/web/api/htmlinputelement/setselectionrange/index.html b/files/ja/web/api/htmlinputelement/setselectionrange/index.html deleted file mode 100644 index a984b07e90..0000000000 --- a/files/ja/web/api/htmlinputelement/setselectionrange/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: HTMLInputElement.setSelectionRange() -slug: Web/API/HTMLInputElement/setSelectionRange -tags: - - API - - HTML DOM - - HTMLInputElement - - Method - - Reference - - Text Field Selection API -translation_of: Web/API/HTMLInputElement/setSelectionRange ---- -
{{APIRef("HTML DOM")}}
- -

HTMLInputElement.setSelectionRange() 関数は{{HTMLElement("input")}}または、{{HTMLElement("textarea")}}要素に対して有効です。要素に対して任意の開始と末尾のポジションを設定することでテキストを選択状態にします。

- -

更に、より新しいブラウザでは選択する方向をも考慮する必要があります。つまり、ユーザーがクリックした後ドラッグして選択状態にする際のドラッグの方向が、はじめからなのか、おしりからなのか、考慮するということです。

- -

この関数はアップデートされ、HTMLInputElement.selectionStart, selectionEnd, and selectionDirectionプロパティを一度に呼び出し更新することができます。

- -

Note that accordingly to the WHATWG forms spec selectionStart, selectionEnd properties and setSelectionRange method apply only to inputs of types text, search, URL, tel and password. Chrome, starting from version 33, throws an exception while accessing those properties and method on the rest of input types. For example, on input of type number: "Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection.".

- -

 

- -

Syntax

- -
element.setSelectionRange(selectionStart, selectionEnd [, selectionDirection]);
-
- -

Parameters

- -

selectionEnd がselectionStartより小さい場合、両方の値はselectionEndとして扱われます。

- -
-
selectionStart
-
0を基準とした選択状態の文字のインデックス。指定されたインデックスが文字の長さより長い場合は、文字の長さをインデックスに指定したものとみなされます。
-
selectionEnd
-
0を基準とした選択状態の最後の文字のインデックス。指定されたインデックスが文字の長さより長い場合は、文字の長さをインデックスに指定したものとみなされます。
-
selectionDirection {{optional_inline}}
-
選択する際の方向を指定します。取りうる値は以下のとおりです。 -
    -
  • "forward"
    • -
  • "backward"
    • -
  • "none" 選択する際の方向が指定されていない時です。デフォルト値になります。
    • -
-
-
- -

Example

- -

サンプルの中のボタンをクリックすると、テキストボックスの３，４，５番目の文字が選択状態になります。 ("Mozilla"の"zil").

- -

HTML

- -
<input type="text" id="text-box" size="20" value="Mozilla">
-<button onclick="selectText()">Select text</button>
-
- -

JavaScript

- -
function selectText() {
-  const input = document.getElementById('text-box');
-  input.focus();
-  input.setSelectionRange(2, 5);
-}
- -

実行結果

- -

{{EmbedLiveSample("Example")}}

- -

仕様

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("HTML WHATWG", "forms.html#dom-textarea/input-setselectionrange", "HTMLInputElement.setSelectionRange()")}}{{Spec2("HTML WHATWG")}}No change
{{SpecName("HTML5.1", "forms.html#dom-textarea/input-setselectionrange", "HTMLInputElement.setSelectionRange()")}}{{Spec2("HTML5.1")}}No change
{{SpecName("HTML5 W3C", "forms.html#dom-textarea/input-setselectionrange", "HTMLInputElement.setSelectionRange()")}}{{Spec2("HTML5 W3C")}}Initial definition
- -

ブラウザ互換性

- -
- - -

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

-
- -

参照

- - diff --git a/files/ja/web/api/htmlinputelement/setselectionrange/index.md b/files/ja/web/api/htmlinputelement/setselectionrange/index.md new file mode 100644 index 0000000000..a984b07e90 --- /dev/null +++ b/files/ja/web/api/htmlinputelement/setselectionrange/index.md @@ -0,0 +1,115 @@ +--- +title: HTMLInputElement.setSelectionRange() +slug: Web/API/HTMLInputElement/setSelectionRange +tags: + - API + - HTML DOM + - HTMLInputElement + - Method + - Reference + - Text Field Selection API +translation_of: Web/API/HTMLInputElement/setSelectionRange +--- +
{{APIRef("HTML DOM")}}
+ +

HTMLInputElement.setSelectionRange() 関数は{{HTMLElement("input")}}または、{{HTMLElement("textarea")}}要素に対して有効です。要素に対して任意の開始と末尾のポジションを設定することでテキストを選択状態にします。

+ +

更に、より新しいブラウザでは選択する方向をも考慮する必要があります。つまり、ユーザーがクリックした後ドラッグして選択状態にする際のドラッグの方向が、はじめからなのか、おしりからなのか、考慮するということです。

+ +

この関数はアップデートされ、HTMLInputElement.selectionStart, selectionEnd, and selectionDirectionプロパティを一度に呼び出し更新することができます。

+ +

Note that accordingly to the WHATWG forms spec selectionStart, selectionEnd properties and setSelectionRange method apply only to inputs of types text, search, URL, tel and password. Chrome, starting from version 33, throws an exception while accessing those properties and method on the rest of input types. For example, on input of type number: "Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection.".

+ +

 

+ +

Syntax

+ +
element.setSelectionRange(selectionStart, selectionEnd [, selectionDirection]);
+
+ +

Parameters

+ +

selectionEnd がselectionStartより小さい場合、両方の値はselectionEndとして扱われます。

+ +
+
selectionStart
+
0を基準とした選択状態の文字のインデックス。指定されたインデックスが文字の長さより長い場合は、文字の長さをインデックスに指定したものとみなされます。
+
selectionEnd
+
0を基準とした選択状態の最後の文字のインデックス。指定されたインデックスが文字の長さより長い場合は、文字の長さをインデックスに指定したものとみなされます。
+
selectionDirection {{optional_inline}}
+
選択する際の方向を指定します。取りうる値は以下のとおりです。 +
    +
  • "forward"
    • +
  • "backward"
    • +
  • "none" 選択する際の方向が指定されていない時です。デフォルト値になります。
    • +
+
+
+ +

Example

+ +

サンプルの中のボタンをクリックすると、テキストボックスの３，４，５番目の文字が選択状態になります。 ("Mozilla"の"zil").

+ +

HTML

+ +
<input type="text" id="text-box" size="20" value="Mozilla">
+<button onclick="selectText()">Select text</button>
+
+ +

JavaScript

+ +
function selectText() {
+  const input = document.getElementById('text-box');
+  input.focus();
+  input.setSelectionRange(2, 5);
+}
+ +

実行結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "forms.html#dom-textarea/input-setselectionrange", "HTMLInputElement.setSelectionRange()")}}{{Spec2("HTML WHATWG")}}No change
{{SpecName("HTML5.1", "forms.html#dom-textarea/input-setselectionrange", "HTMLInputElement.setSelectionRange()")}}{{Spec2("HTML5.1")}}No change
{{SpecName("HTML5 W3C", "forms.html#dom-textarea/input-setselectionrange", "HTMLInputElement.setSelectionRange()")}}{{Spec2("HTML5 W3C")}}Initial definition
+ +

ブラウザ互換性

+ +
+ + +

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

+
+ +

参照

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