HTMLInputElement: selectionEnd-Eigenschaft

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Die selectionEnd-Eigenschaft der HTMLInputElement Schnittstelle ist eine Zahl, die den Endindex des ausgewählten Textes darstellt. Das heißt, es repräsentiert den Index des Zeichens, das unmittelbar nach der Auswahl kommt. Ebenso gibt dies, wenn keine Auswahl getroffen wurde, den Versatz des Zeichens zurück, das unmittelbar auf die aktuelle Textcursorposition folgt.

Hinweis: Laut der WHATWG Formen Spezifikation gilt die selectionEnd-Eigenschaft nur für Eingaben der Typen Text, Suche, URL, Telefon und Passwort. In modernen Browsern wird eine Ausnahme ausgelöst, wenn die selectionEnd-Eigenschaft für die übrigen Eingabetypen festgelegt wird. Zusätzlich gibt diese Eigenschaft null zurück, wenn auf die selectionEnd-Eigenschaft von Nicht-Text-Eingabe-Elementen zugegriffen wird.

Wenn selectionEnd kleiner ist als selectionStart, werden beide als Wert von selectionEnd behandelt.

html
<!-- using selectionEnd on non text input element -->
<label for="color">selectionStart property on type=color</label>
<input id="color" type="color" />

<!-- using selectionEnd on text input element -->
<fieldset>
  <legend>selectionEnd property on 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;
});

// open browser console to verify output
console.log(colorEnd.selectionEnd); // Output : null