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 des HTMLInputElement-Interfaces ist eine Zahl, die den Endindex des ausgewählten Textes darstellt. Das heißt, sie stellt den Index des Zeichens dar, das unmittelbar nach der Auswahl folgt. Ebenso gibt sie, wenn keine Auswahl vorhanden ist, den Offset des Zeichens zurück, das unmittelbar nach der aktuellen Textcursorposition folgt.
Hinweis:
Gemäß der WHATWG-Formspezifikation gilt die selectionEnd-Eigenschaft nur für Eingaben der Typen text, search, URL, tel und password. In modernen Browsern wird eine Ausnahme ausgelöst, wenn die selectionEnd-Eigenschaft bei anderen Eingabetypen gesetzt wird. Zusätzlich gibt diese Eigenschaft null zurück, wenn die selectionEnd-Eigenschaft auf Nicht-Text-Eingabeelementen aufgerufen wird.
Wenn selectionEnd kleiner als selectionStart ist, werden beide als der Wert von selectionEnd behandelt.
Wert
Eine nicht-negative Zahl.
Beispiele
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
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
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| HTML # dom-textarea/input-selectionend |
Browser-Kompatibilität
Siehe auch
<input>HTMLInputElementHTMLTextAreaElement.selectionEnd-EigenschaftHTMLInputElement.selectionStart-EigenschaftHTMLInputElement.setSelectionRange-Methode