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.

Vollständige Kompatibilität anzeigen
Mehr erfahren

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

Die selectionEnd-Eigenschaft ist eine Zahl, die den nullbasierten Index des Zeichens direkt nach dem zuletzt ausgewählten Zeichen in einem Text-<input> darstellt. Die Eigenschaft kann verwendet werden, um die Endposition abzurufen oder festzulegen.

Wenn nichts ausgewählt ist, ist der Wert von sowohl selectionStart als auch selectionEnd die Position des Cursors (Caret) im <input>-Element.

Wenn selectionEnd auf einen Wert kleiner als der aktuelle Wert von selectionStart gesetzt wird, werden beide Eigenschaften auf den neuen Wert aktualisiert. Werte, die größer sind als die Länge des Eingabewertes, werden als Ende des Wertes behandelt.

Die selectionEnd-Eigenschaft gilt nur für Eingaben der Typen text, search, url, tel und password. Bei anderen Eingabetypen führt das Lesen der Eigenschaft zu null, und das Setzen löst einen InvalidStateError-DOMException aus.

Der Eigenschaftswert kann abgerufen und festgelegt werden, ohne dass das <input> den Fokus hat, aber das Element muss den Fokus haben, damit das ::selection-Pseudo-Element den ausgewählten Text abgleichen kann.

Das Setzen von selectionEnd auf einen neuen Wert löst die selectionchange- und select-Ereignisse 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}).`;
});