HTMLInputElement: selectionEnd プロパティ

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

selectionEnd は HTMLInputElement インターフェイスのプロパティで、選択テキストの末尾のインデックスを表す数値です。選択がない場合、これは現在のテキスト入力カーソル位置の直後の文字のオフセットを返します。

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

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

html
<!-- selectionEnd を非テキスト入力要素で使用 -->
<label for="color">selectionStart プロパティを type=color に設定</label>
<input id="color" type="color" />

<!-- selectionEnd をテキスト入力要素で使用 -->
<fieldset>
  <legend>selectionEnd プロパティを type=text に設定</legend>
  <label for="pin">Input PIN</label>
  <input type="text" id="pin" value="impossible PIN: 102-12-145" />
  <button id="pin-btn" type="button">PIN correction</button>
</fieldset>

JavaScript

js
const colorEnd = document.getElementById("color");
const text = document.querySelector("#pin");
const pinBtn = document.querySelector("#pin-btn");
const validPinChecker = /[^\d{3}-\d{2}-\d{3}]/g;
const selectionEnd = text.value.length;
const selectedText = text.value.substring(text.selectionStart, selectionEnd);

pinBtn.addEventListener("click", () => {
  const correctedText = selectedText.replace(validPinChecker, "");
  text.value = correctedText;
});

// ブラウザーコンソールを開いて出力を確認してください
console.log(colorEnd.selectionEnd); // Output : null

MDN の改良に協力

このページは役に立ちましたか？

はいいいえ

協力方法を知る

このページは MDN の貢献者によって 2025年7月22日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告

HTMLInputElement: selectionEnd プロパティ

目次

値

例

HTML

JavaScript

結果

仕様書

ブラウザーの互換性

関連情報

MDN の改良に協力