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 Wirkung zeigt.

Optional können Sie die Richtung angeben, in der die Auswahl vorgenommen wurde. Damit können Sie beispielsweise angeben, dass die Auswahl vom Benutzer erstellt wurde, indem er vom Ende des ausgewählten Textes zum Anfang gezogen hat.

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

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

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

Syntax

js
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 Werts 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 Werts des Elements ist, wird als Zeiger auf das Ende des Wertes behandelt. Wenn selectionEnd kleiner als selectionStart ist, werden beide als Wert von selectionEnd behandelt.

selectionDirection Optional

Ein Zeichenfolgenwert, der die Richtung angibt, in der die Auswahl vorgenommen wurde. 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 in diesem Beispiel auf den Button, um die dritte, vierte und fünfte Zeichen in der Textbox auszuwählen ("zil" im Wort "Mozilla").

HTML

html
<input type="text" id="text-box" size="20" value="Mozilla" />
<button>Select text</button>

JavaScript

js
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

Browser-Kompatibilität

Siehe auch