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() の定義 |
勧告 | 初回定義 |
ブラウザ互換性
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.