HTMLInputElement.setRangeText()

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

構文

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

引数

置換対象
挿入する文字列。
開始Optional
置き換える最初の文字の位置を0始まりで指定します。既定は現在のselectionStartの値(利用者が現在選択している範囲の始め)です。
終了Optional
置き換える最初の文字の一つ後の位置を0始まりで指定します。既定は現在のselectionEndの値(利用者が現在選択している範囲の終わり)です。
選択状態Optional
文章が置換された後,選択範囲がどのように振る舞うべきかを指定します。
次の値が有効です:
  • 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');
}

結果

仕様書

仕様書 状態 備考
HTML Living Standard
HTMLInputElement.setSelectionRange() の定義
現行の標準 変更なし
HTML5
HTMLInputElement.setSelectionRange() の定義
勧告 初回定義

ブラウザ互換性

No compatibility data found. Please contribute data for "api.HTMLInputElement.setRangeText" (depth: 1) to the MDN compatibility data repository.

関連項目