HTMLTextAreaElement: 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 des HTMLTextAreaElement-Interfaces gibt die Endposition der aktuellen Textauswahl in einem <textarea>-Element an.

Die selectionEnd-Eigenschaft ist eine Zahl, die den nullbasierten Index des Zeichens darstellt, das unmittelbar auf das zuletzt ausgewählte Zeichen in einem <textarea> folgt. 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 (Einfügemarke) im <textarea>-Element.

Wird selectionEnd auf einen Wert kleiner als der aktuelle Wert von selectionStart gesetzt, werden beide Eigenschaften auf den neuen Wert aktualisiert. Werte, die größer als die textLength sind, werden als textLength behandelt.

Der Eigenschaftswert kann abgerufen und gesetzt werden, ohne dass der <textarea> den Fokus hat, aber das Element muss den Fokus haben, damit das ::selection-Pseudo-Element mit dem ausgewählten Text übereinstimmt.

Das Setzen von selectionEnd auf einen neuen Wert löst die Ereignisse selectionchange und select aus.

<label for="text-box">Select some text:</label>
<textarea id="text-box" rows="3">The quick brown fox.</textarea>
<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}).`;
});