HTMLInputElement: Eigenschaft selectionStart

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 selectionStart der Schnittstelle HTMLInputElement gibt die Anfangsposition der aktuellen Textauswahl in einem <input>-Element an.

Wert

Eine nicht negative Zahl, die den nullbasierten Index des ersten ausgewählten Zeichens in einem <input>-Element mit Texteingabe angibt. Wenn nichts ausgewählt ist, entsprechen sowohl selectionStart als auch selectionEnd der Position des Cursors (der Einfügemarke) innerhalb des <input>-Elements.

Wenn selectionStart auf einen Wert gesetzt wird, der größer als der aktuelle Wert von selectionEnd 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 selectionStart auf einen neuen Wert löst die Ereignisse selectionchange und select aus.

Der Eigenschaftswert kann auch dann abgerufen und gesetzt werden, wenn das <input>-Element keinen Fokus hat. Damit das Pseudoelement ::selection jedoch auf den ausgewählten Text zutrifft, muss das Element den Fokus haben.

Die Eigenschaft selectionStart gilt nur für Eingaben der Typen text, search, url, tel und password. Bei anderen Eingabetypen gibt das Lesen der Eigenschaft null zurück; beim Setzen wird eine DOMException vom Typ InvalidStateError ausgelöst.

<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}).`;
});