HTMLInputElement: setSelectionRange() メソッド
HTMLInputElement.setSelectionRange()
メソッドは、 <input>
または <textarea>
要素の中で現在のテキストの選択範囲の開始位置と終了位置を設定します。
オプションとして、新しいバージョンのブラウザーでは、選択が行われたとみなす方向を指定することができます。これにより、例えば、ユーザーが選択範囲を設定するのに、選択されたテキストの末尾から先頭に向けてクリックとドラッグが行われたことを示すことができます。
この関数は 1 回の呼び出しで、 HTMLInputElement.selectionStart
, selectionEnd
, selectionDirection
の各プロパティを更新します。
WHATWG フォーム仕様書によると、 selectionStart
, selectionEnd
プロパティと setSelectionRange
メソッドは、 text, search, URL, tel, password 型の入力欄にのみ適用されることに注意してください。 Chrome のバージョン 33 以降では、それ以外の入力型でこれらのプロパティとメソッドにアクセスすると例外が発生します。例えば、 number
型の入力欄では、 "Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection" ('HTMLInputElement' の 'selectionStart' プロパティを読み取りに失敗しました。この input 要素の入力型 ('number') は選択に対応していません)となります。
input 要素のすべてのテキストを選択したい場合は、代わりに HTMLInputElement.select() メソッドを使用してください。
構文
setSelectionRange(selectionStart, selectionEnd)
setSelectionRange(selectionStart, selectionEnd, selectionDirection)
引数
selectionEnd
が selectionStart
より小さい場合、両方の値は selectionEnd
として扱われます。
selectionStart
-
選択する最初の文字の 0 から始まる位置です。位置が要素の値の長さよりも大きい場合は、要素の値の末尾の位置と見なされます。
selectionEnd
-
選択する最後の文字の次の 0 から始まる位置です。位置が要素の長さよりも大きい場合は、要素の値の末尾の位置と見なされます。
selectionDirection
省略可-
選択が行われたと見なされる方向を示す文字列です。取りうる値は次の通りです。
"forward"
"backward"
"none"
選択方向が不明または無関係な場合です。既定値です。
返値
なし (undefined
)。
例
この例の中のボタンをクリックすると、テキストボックスの 3、4、5 番目の文字("Mozilla" の "zil")が選択状態になります。
HTML
<input type="text" id="text-box" size="20" value="Mozilla" />
<button onclick="selectText()">テキストを選択</button>
JavaScript
function selectText() {
const input = document.getElementById("text-box");
input.focus();
input.setSelectionRange(2, 5);
}
結果
仕様書
Specification |
---|
HTML Standard # dom-textarea/input-setselectionrange-dev |
ブラウザーの互換性
BCD tables only load in the browser