HTMLInputElement: selectionEnd-Eigenschaft
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
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.
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
| Specification |
|---|
| HTML # dom-textarea/input-selectionend |
Browser-Kompatibilität
Siehe auch
HTMLTextAreaElement.selectionEnd-EigenschaftHTMLInputElement.selectionStart-EigenschaftHTMLInputElement.setSelectionRange-Methode