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)

<input type="text" id="text-box" size="20" value="Mozilla" />
<button onclick="selectText()">テキストを選択</button>

function selectText() {
  const input = document.getElementById("text-box");
  input.focus();
  input.setSelectionRange(2, 5);
}