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 と扱われます。

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

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2025年7月22日 by MDN contributors.

View this page on GitHub • Report a problem with this content

HTMLInputElement: selectionStart プロパティ

In this article

値

例

HTML

JavaScript

結果

仕様書

ブラウザーの互換性

関連情報

Help improve MDN