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
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 alsselectionStart
ist, werden beide als Wert vonselectionEnd
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
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
<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 |