DOM

：

：

HTMLInputElement.setSelectionRange() メソッド

　編集：2022.11.06 by T.A.

[Edge]。→、、

HTMLInputElement のテキストの中を範囲選択します。フォーカスは与えません。

このメソッドの呼び出しにより、selectionStart、selectionEnd、selectionDirection の各プロパティは更新されます。

mdn： <input> または <textarea> 要素の中で現在のテキストの選択範囲の開始位置と終了位置を設定します。

mdn： オプションとして、新しいバージョンのブラウザーでは、選択が行われたとみなす方向を指定することができます。これにより、例えば、ユーザーが選択範囲を設定するのに、選択されたテキストの末尾から先頭に向けてクリックとドラッグが行われたことを示すことができます。

mdn： この関数は 1 回の呼び出しで、HTMLInputElement.selectionStart、selectionEnd、selectionDirection の各プロパティを更新します。

mdn： 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') は選択に対応していません）となります。

mdn： input 要素のすべてのテキストを選択したい場合は、代わりに select() メソッドを使用してください。

構文
HTMLInputElement.setSelectionRange(selectionStart, selectionEnd[, selectionDirection])
HTMLInputElement HTMLInputElement。
selectionStart 選択する最初の文字位置を表す数値。0～。位置が要素の値の長さよりも大きい場合は、要素の値の末尾の位置と見なされます。
selectionEnd 選択する最後の文字位置を表す数値。0～。位置が要素の長さよりも大きい場合は、要素の値の末尾の位置と見なされます。
selectionDirection 省略可。選択が行われたと見なされる方向を示す文字列。以下の何れかです。
forward 後方
backward 前方
none 選択方向が不明または無関係な場合です。初期値。

selEnd が selStart より小さい場合、両方の値は selEnd として扱われます。

戻り値

例
mdnより

この例の中のボタンをクリックすると、テキストボックスの 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);
}

HTML： 

<SPAN id=IdSpan>ここをクリック</SPAN>
<INPUT id=IdTest type=text value="INPUT要素">

JavaScript： 

function Job(eve){  //click イベントの処理：
  IdTest.focus();  //フォーカスさせないと選択具合が判らないようです。
  IdTest.setSelectionRange(2, 4);
}
IdSpan.onclick=Job;  //click イベント割り当て。

→focus()。click イベント。

テスト