HTMLInputElement: 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.

HTMLInputElement.setRangeText() メソッドは、 <input><textarea> 要素の中のテキストの範囲を新しい文字列に置き換えます。

構文

js
setRangeText(replacement)
setRangeText(replacement, start)
setRangeText(replacement, start, end)
setRangeText(replacement, start, end, selectMode)

引数

replacement

挿入する文字列。

start 省略可

置換する最初の文字を 0 から始まる位置で指定します。既定値は現在の selectionStart の値(ユーザーが現在選択している先頭)です。

end 省略可

置換する最後の文字の次の文字を 0 から始まる位置で指定します。既定値は現在の selectionEnd の値(ユーザーが現在選択している末尾)です。

selectMode 省略可

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

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

返値

なし (undefined)。

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

HTML

html
<input
  type="text"
  id="text-box"
  size="30"
  value="このテキストは更新されていません。" />
<button onclick="selectText()">テキストを更新</button>

JavaScript

js
function selectText() {
  const input = document.getElementById("text-box");
  input.focus();
  input.setRangeText("ました", 11, 16, "select");
}

結果

仕様書

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
setRangeText

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報