HTMLInputElement: 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 HTMLInputElement Interfaces gibt die Startposition der aktuellen Textauswahl in einem <input>-Element an.

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

Wenn nichts ausgewählt ist, ist der Wert von sowohl selectionStart als auch selectionEnd die Position des Cursors (Eingabepunkt) innerhalb des <input>-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 sind als die Länge des Werts des Eingabefelds, werden als das Ende des Werts behandelt.

Die selectionStart-Eigenschaft gilt nur für Eingaben der Typen text, search, url, tel und password. Bei anderen Eingabetypen gibt das Lesen der Eigenschaft null zurück, und das Setzen wirft einen InvalidStateError DOMException.

Der Eigenschaftswert kann abgerufen und gesetzt werden, ohne dass das <input> im Fokus ist, aber das Element muss im Fokus sein, damit das ::selection Pseudo-Element den ausgewählten Text zuordnen kann.

Das Setzen von selectionStart 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}).`;
});