HTMLInputElement: selectionEnd プロパティ

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月.

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

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

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

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

JavaScript

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