HTMLInputElement: setSelectionRange() Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die HTMLInputElement.setSelectionRange() Methode legt die Start- und Endpositionen der aktuellen Textauswahl in einem <input> oder <textarea> Element fest.

Das Element muss fokussiert sein, damit der Aufruf eine Wirkung hat.

Optional können Sie die Richtung angeben, in die die Auswahl betrachtet werden soll. Dies ermöglicht es Ihnen anzugeben, dass die Auswahl beispielsweise durch Klicken und Ziehen des Nutzers vom Ende des ausgewählten Textes zum Anfang erfolgt ist.

Diese Methode aktualisiert die HTMLInputElement.selectionStart, HTMLInputElement.selectionEnd und HTMLInputElement.selectionDirection Eigenschaften in einem Aufruf.

Das Element muss einer der folgenden Eingabetypen haben: password, search, tel, text oder url. Andernfalls wirft der Browser eine InvalidStateError Ausnahme.

Wenn Sie den gesamten Text eines Eingabeelements auswählen möchten, können Sie stattdessen die HTMLInputElement.select() Methode verwenden.

Syntax

setSelectionRange(selectionStart, selectionEnd)
setSelectionRange(selectionStart, selectionEnd, selectionDirection)

Parameter

selectionStart

Der 0-basierte Index des ersten ausgewählten Zeichens. Ein Index, der größer als die Länge des Wertes des Elements ist, wird als Zeiger auf das Ende des Wertes behandelt.

selectionEnd

Der 0-basierte Index des Zeichens nach dem letzten ausgewählten Zeichen. Ein Index, der größer als die Länge des Wertes des Elements ist, wird als Zeiger auf das Ende des Wertes behandelt. Wenn selectionEnd kleiner als selectionStart ist, werden beide als der Wert von selectionEnd behandelt.

selectionDirection Optional

Ein String, der die Richtung angibt, in der die Auswahl betrachtet wird. Mögliche Werte:

"forward"
"backward"
"none" falls die Richtung unbekannt oder irrelevant ist. Standardwert.

Rückgabewert

Keiner (undefined).

Ausnahmen

InvalidStateError DOMException: Wird ausgelöst, wenn das Element nicht einer der folgenden Eingabetypen ist: password, search, tel, text oder url.

Beispiele

Klicken Sie auf die Schaltfläche in diesem Beispiel, um das dritte, vierte und fünfte Zeichen im Textfeld auszuwählen ("zil" im Wort "Mozilla").

HTML

html

<input type="text" id="text-box" size="20" value="Mozilla" />
<button onclick="selectText()">Select text</button>

JavaScript

function selectText() {
  const input = document.getElementById("text-box");
  input.focus();
  input.setSelectionRange(2, 5);
}

Ergebnis

Spezifikationen

Specification
HTML # dom-textarea/input-setselectionrange-dev