HTMLInputElement: selectionStart プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

selectionStart はHTMLInputElement インターフェイスのプロパティで、選択テキストの先頭インデックスを表す数値です。何も選択されていない場合は、<input> 要素内のテキスト入力カーソル（キャレット）の位置を返します。

メモ:WHATWG のフォーム仕様書によると、selectionStart プロパティは text、search、URL、tel、password の各入力型にのみ適用されます。現行のブラウザーでは、それ以外の入力型にselectionStart プロパティを設定すると例外が発生します。さらに、テキスト以外の入力要素でselectionStart プロパティにアクセスすると、このプロパティはnull を返します。

selectionStart がselectionEnd よりも大きくなった場合、両者はselectionEnd と扱われます。

<!-- selectionStart を非テキスト入力要素で使用 --><label for="color">selectionStart プロパティを type=color に設定</label><input type="color" /><!-- selectionStart をテキスト入力要素で使用 --><fieldset>  <legend>selectionStart プロパティを type=text に設定</legend>  <label for="statement">テキスト内の 'mdn' を選択してください : </label>  <input    type="text"       value="The mdn is a documentation repository." />  <button>Select mdn text</button></fieldset>

JavaScript

const inputElement = document.getElementById("statement");const statementBtn = document.getElementById("statement-btn");const colorStart = document.getElementById("color");statementBtn.addEventListener("click", () => {  inputElement.selectionStart = 4;  inputElement.selectionEnd = 7;  inputElement.focus();});// ブラウザーコンソールを開いて出力を確認してくださいconsole.log(colorStart.selectionStart); // Output : null