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() の定義
勧告 初回定義

ブラウザ互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
setRangeTextChrome 完全対応 24Edge 未対応 なしFirefox 完全対応 27IE 未対応 なしOpera 完全対応 ありSafari 完全対応 6.1WebView Android 完全対応 ありChrome Android 完全対応 25Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 7Samsung Internet Android 完全対応 1.5

凡例

完全対応  
完全対応
未対応  
未対応

関連項目