HTMLTextAreaElement: setRangeText() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

setRangeText() は HTMLTextAreaElement インターフェイスのメソッドで、 <textarea> 要素内のテキストの範囲を、引数として渡した新しいテキストで置き換えます。

追加のオプション引数には、変更するテキストの範囲の先頭、その範囲の末尾、およびテキストが更新された後に選択すべき <textarea> のどの部分を定義するキーワードを記載します。 startSelection と endSelection 引数が指定されていない場合、その範囲が選択範囲であると見なされます。

最後の引数は、テキストが置換された後に選択範囲がどのように設定されるかを決定します。 可能な値は、 "select" で新たに挿入されたテキストを選択し、 "start" で選択範囲を挿入されたテキストの直前に移動し、 "end" で選択範囲を挿入されたテキストの直後に移動し、既定値の "preserve" は選択範囲を維持しようとします。

それに加えて select および selectchange イベントが発行されます。

構文

js
setRangeText(replacement)
setRangeText(replacement, startSelection)
setRangeText(replacement, startSelection, endSelection)
setRangeText(replacement, startSelection, endSelection, selectMode)

引数

replacement

挿入する文字列。

selectionStart 省略可

最初の選択文字のインデックス。インデックスが要素の値の長さを超えている場合は、値の末尾を指しているものとみなされます。

selectionEnd 省略可

最後に選択された文字の次の文字のインデックス。インデックスが要素の値の長さを超えている場合は、値の末尾を指しているものとみなされます。 selectionEnd が selectionStart より小さい場合、どちらも selectionEnd の値として扱われます。

selectMode 省略可

select、start、end、または既定値の preserve のいずれかのキーワードで、テキストが置き換えられた後に選択をどのように設定するかを定義します。

返値

なし (undefined)。

例

この例にあるボタンをクリックすると、テキストボックス内のテキストの一部を置き換えます。新しく挿入されたテキストは、その後で強調（選択）されます。

HTML

html
<label for="ta">空の入力フィールドの例:</label>
<textarea id="ta">
  このテキストは更新されません。
</textarea>
<button id="btn">テキストを更新</button>

JavaScript

js
const btn = document.getElementById("btn");

btn.addEventListener("click", () => {
  changeText();
});

function changeText() {
  const textarea = document.getElementById("text-box");
  textarea.focus();
  textarea.setRangeText("ALREADY", 14, 17, "select");
}

結果

仕様書

Specification
HTML Standard
# dom-textarea/input-setrangetext-dev

ブラウザーの互換性

BCD tables only load in the browser

関連情報