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 ⁨2020年1月⁩.

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

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

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

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

構文

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 のいずれかのキーワードで、テキストが置き換えられた後に選択をどのように設定するかを定義します。

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

JavaScript

const btn = document.getElementById("btn");btn.addEventListener("click", () => {  changeText();});function changeText() {  const textarea = document.getElementById("ta");  textarea.focus();  textarea.setRangeText("ALREADY", 14, 17, "select");}