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 Anfangs- und Endposition 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 der die Auswahl als erfolgt betrachtet werden soll. Dies ermöglicht es Ihnen beispielsweise anzugeben, dass die Auswahl durch Klicken und Ziehen des Benutzers vom Ende des ausgewählten Textes zurück zum Anfang gesetzt wurde.

Diese Methode aktualisiert die Eigenschaften HTMLInputElement.selectionStart, HTMLInputElement.selectionEnd und HTMLInputElement.selectionDirection 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 Methode HTMLInputElement.select() verwenden.

Syntax

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

Parameter

selectionStart

Der nullbasierte Index des ersten ausgewählten Zeichens. Ein Index größer als die Länge des Werts des Elements wird als Zeiger auf das Ende des Werts behandelt.

selectionEnd

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

selectionDirection Optional

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

"forward"
"backward"
"none" wenn 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>Select text</button>

JavaScript

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

document.querySelector("button").addEventListener("click", selectText);

Ergebnis

Spezifikationen

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