From 208cd1ff06a2204eb213ed038c8af4d05f1aa65f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 5 Feb 2022 23:03:35 +0900 Subject: 2021/09/15 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/api/htmlinputelement/setrangetext/index.md | 141 +++++++++------------ 1 file changed, 61 insertions(+), 80 deletions(-) diff --git a/files/ja/web/api/htmlinputelement/setrangetext/index.md b/files/ja/web/api/htmlinputelement/setrangetext/index.md index 06d23ddd27..8beee8bc70 100644 --- a/files/ja/web/api/htmlinputelement/setrangetext/index.md +++ b/files/ja/web/api/htmlinputelement/setrangetext/index.md @@ -3,99 +3,80 @@ title: HTMLInputElement.setRangeText() slug: Web/API/HTMLInputElement/setRangeText tags: - API + - HTML DOM - HTMLInputElement + - メソッド + - NeedsCompatTable + - リファレンス + - テキスト欄選択 API +browser-compat: api.HTMLInputElement.setRangeText translation_of: Web/API/HTMLInputElement/setRangeText --- -
{{APIRef("HTML DOM")}}
+{{APIRef("HTML DOM")}} -

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

+**`HTMLInputElement.setRangeText()`** メソッドは、 {{HTMLElement("input")}} や {{HTMLElement("textarea")}} 要素の中のテキストの範囲を新しい文字列に置き換えます。 -

構文

+## 構文 -
element.setRangeText(置換対象);
-element.setRangeText(置換対象, 開始, 終了 [, 選択状態]);
-
+```js +element.setRangeText(replacement); +element.setRangeText(replacement, start, end [, selectMode]); +``` -

引数

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

事例

+ - : テキストが置換された後で、選択範囲がどのように設定されるかを定義する文字列です。 + 次の値が利用できます。 -

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

+ - `"select"`: 新規挿入したテキストを選択します。 + - `"start"`: 挿入したテキストの直前に選択範囲を移動します。 + - `"end"`: 挿入したテキストの直後に選択範囲を移動します。 + - `"preserve"`: 選択範囲を保全しようとします。これが既定値です。 -

HTML

+## 例 -
<input type="text" id="text-box" size="18" value="この文章は更新されていません。"/>
-<button onclick="selectText()">文章を更新する</button>
-
+この例にあるボタンをクリックすると、テキストボックス内のテキストの一部を置き換えます。新しく挿入されたテキストは、その後で強調（選択）されます。 -

JavaScript

+### HTML -
function selectText() {
+```html
+
+
+```
+
+### JavaScript
+
+```js
+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")}}

-
- -

関連項目

- - + input.setRangeText('ました', 11, 16, 'select'); +} +``` + +### 結果 + +{{EmbedLiveSample("Example")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{HTMLElement("input")}} +- {{HTMLElement("textarea")}} +- {{domxref("HTMLInputElement")}} +- {{domxref("Selection")}} -- cgit v1.2.3-54-g00ecf