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.
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 Standard # dom-textarea/input-selectionstart |
ブラウザーの互換性
BCD tables only load in the browser