HTMLInputElement: Eigenschaft selectionEnd

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.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die Eigenschaft selectionEnd der Schnittstelle HTMLInputElement gibt die Endposition der aktuellen Textauswahl in einem <input>-Element an.

Wert

Eine nicht negative Zahl, die den nullbasierten Index des Zeichens unmittelbar nach dem letzten ausgewählten Zeichen in einem <input>-Element für Texteingaben angibt. Wenn kein Text ausgewählt ist, entsprechen sowohl selectionStart als auch selectionEnd der Position des Cursors im <input>-Element.

Wird selectionEnd auf einen Wert gesetzt, der kleiner als der aktuelle Wert von selectionStart ist, werden beide Eigenschaften auf den neuen Wert gesetzt. Werte, die größer als die Länge des Eingabewerts sind, werden als Ende des Werts behandelt. Das Setzen von selectionEnd auf einen neuen Wert löst die Ereignisse selectionchange und select aus.

Der Eigenschaftswert kann gelesen und gesetzt werden, ohne dass das <input>-Element den Fokus hat. Damit das Pseudoelement ::selection auf den ausgewählten Text angewendet wird, muss das Element jedoch den Fokus haben.

Die Eigenschaft selectionEnd gilt nur für Eingabefelder der Typen text, search, url, tel und password. Bei anderen Eingabetypen gibt das Lesen der Eigenschaft null zurück; das Setzen löst eine DOMException vom Typ InvalidStateError aus.

<label for="text-box">Select some text:</label>
<input id="text-box" type="text" value="The quick brown fox." />
<button id="show-selection" type="button">Show selection</button>
<p id="output">No selection reported yet.</p>

JavaScript

const textBox = document.querySelector("#text-box");
const output = document.querySelector("#output");

document.querySelector("#show-selection").addEventListener("click", () => {
  const start = textBox.selectionStart;
  const end = textBox.selectionEnd;
  const selectedText = textBox.value.substring(start, end);

  output.textContent = `You selected "${selectedText}" (start: ${start}, end: ${end}).`;
});