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 July 2015.
Please take two minutes to fill out our short survey.
selectionStart は HTMLInputElement インターフェイスのプロパティで、選択テキストの先頭インデックスを表す数値です。何も選択されていない場合は、 <input> 要素内のテキスト入力カーソル（キャレット）の位置を返します。
メモ: WHATWG のフォーム仕様書によると、 selectionStart プロパティは text、search、URL、tel、password の各入力型にのみ適用されます。現行のブラウザーでは、それ以外の入力型に selectionStart プロパティを設定すると例外が発生します。さらに、テキスト以外の入力要素で selectionStart プロパティにアクセスすると、このプロパティは null を返します。
selectionStart が selectionEnd よりも大きくなった場合、両者は selectionEnd と扱われます。
値
非負の数値です。
例
HTML
html
<!-- selectionStart を非テキスト入力要素で使用 -->
<label for="color">selectionStart プロパティを type=color に設定</label>
<input id="color" type="color" />
<!-- selectionStart をテキスト入力要素で使用 -->
<fieldset>
<legend>selectionStart プロパティを type=text に設定</legend>
<label for="statement">テキスト内の 'mdn' を選択してください : </label>
<input
type="text"
id="statement"
value="The mdn is a documentation repository." />
<button id="statement-btn">Select mdn text</button>
</fieldset>
JavaScript
js
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
結果
仕様書
| Specification |
|---|
| HTML # dom-textarea/input-selectionstart |