HTMLInputElement.setRangeText()

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

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

置換対象

挿入する文字列。

開始Optional

置き換える最初の文字の位置を0始まりで指定します。既定は現在のselectionStartの値（利用者が現在選択している範囲の始め）です。

終了Optional

置き換える最初の文字の一つ後の位置を0始まりで指定します。既定は現在のselectionEndの値（利用者が現在選択している範囲の終わり）です。

選択状態Optional

文章が置換された後，選択範囲がどのように振る舞うべきかを指定します。
次の値が有効です:

• select: 新規挿入した文章を選択する。
• start: 挿入した文書の直前に選択範囲を移動する。
• end: 挿入した文書の直後に選択範囲を移動する。
• preserve: 選択範囲を保持しようとします。既定です。

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

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

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

• <input>
• <textarea>
• HTMLInputElement
• Selection