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. Wenn keine Auswahl vorhanden ist, gibt diese den Versatz des Zeichens zurück, das unmittelbar nach der aktuellen Textcursorposition folgt.
Hinweis:
Laut der WHATWG Forms Spezifikation gilt die selectionEnd-Eigenschaft nur für Eingabefelder der Typen text, search, URL, tel und password. In modernen Browsern tritt eine Ausnahme auf, wenn die selectionEnd-Eigenschaft auf den restlichen Eingabetypen gesetzt wird. Außerdem gibt diese Eigenschaft null zurück, wenn auf die selectionEnd-Eigenschaft bei Nicht-Text-Eingabeelementen zugegriffen 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
| Specification |
|---|
| HTML # dom-textarea/input-selectionend |
Browser-Kompatibilität
Loading…
Siehe auch
HTMLTextAreaElement.selectionEndEigenschaftHTMLInputElement.selectionStartEigenschaftHTMLInputElement.setSelectionRangeMethode