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.

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

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

selectionStartselectionEnd よりも大きくなった場合、両者は 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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
selectionStart

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報