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

Die selectionStart-Eigenschaft ist eine Zahl, die den nullbasierten Index des ersten ausgewählten Zeichens in einem <textarea> darstellt. Die Eigenschaft kann verwendet werden, um die Startposition abzurufen oder festzulegen.

Wenn nichts ausgewählt ist, entspricht der Wert von selectionStart und selectionEnd der Position des Cursors (Caret) innerhalb des <textarea>-Elements.

Wenn selectionStart auf einen Wert gesetzt wird, der größer ist als der aktuelle Wert von selectionEnd, 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 festgelegt werden, ohne dass das <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 selectionStart 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}).`;
});