HTMLInputElement: Methode setSelectionRange()
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.
Die Methode setSelectionRange() der Schnittstelle HTMLInputElement legt die Start- und Endposition der aktuellen Textauswahl in einem <input>-Element fest. Der Auswahlzustand wird sofort aktualisiert; die Hervorhebung ist jedoch erst sichtbar, wenn das Element den Fokus hat.
Diese Methode aktualisiert die Eigenschaften HTMLInputElement.selectionStart, HTMLInputElement.selectionEnd und HTMLInputElement.selectionDirection in einem einzigen Aufruf. Wenn Sie den gesamten Text eines Eingabeelements auswählen möchten, können Sie stattdessen die Methode select() verwenden.
Die Auswahl in einem Eingabeelement kann entweder einen Zeichenbereich umfassen oder nur aus einer Einfügemarke bestehen, wenn kein Text ausgewählt ist. Indem Sie selectionStart und selectionEnd auf denselben Wert setzen, können Sie die Einfügemarke an eine bestimmte Position im Textfeld verschieben.
Syntax
setSelectionRange(selectionStart, selectionEnd)
setSelectionRange(selectionStart, selectionEnd, selectionDirection)
Parameter
selectionStart-
Der nullbasierte Index des ersten ausgewählten Zeichens. Ein Index, der größer als die Länge des Werts des Elements ist, wird so behandelt, als würde er auf das Ende des Werts zeigen. Siehe die Eigenschaft
selectionStart. selectionEnd-
Der nullbasierte Index des Zeichens nach dem letzten ausgewählten Zeichen. Ein Index, der größer als die Länge des Werts des Elements ist, wird so behandelt, als würde er auf das Ende des Werts zeigen. Wenn
selectionEndkleiner alsselectionStartist, werden beide als Wert vonselectionEndbehandelt. Siehe die EigenschaftselectionEnd. selectionDirectionOptional-
Eine Zeichenfolge, die angibt, in welcher Richtung die Auswahl als erfolgt gilt. Siehe die Eigenschaft
selectionDirection. Mögliche Werte:"forward""backward""none", wenn die Richtung unbekannt oder unerheblich ist. Standardwert.
Rückgabewert
Keiner (undefined).
Ausnahmen
Beispiele
Text auswählen
Klicken Sie in diesem Beispiel auf die Schaltfläche, um das dritte, vierte und fünfte Zeichen im Textfeld 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
Einfügemarke verschieben
Wenn Sie für selectionStart und selectionEnd denselben Wert übergeben, wird die Einfügemarke verschoben, ohne Text auszuwählen. Wählen Sie eine Position und klicken Sie auf die Schaltfläche, um die Einfügemarke dorthin zu verschieben. Position 0 liegt vor dem ersten Zeichen und Position 7 hinter dem letzten.
HTML
<input type="text" id="caret-box" size="20" value="Mozilla" />
<label>
Position
<input type="number" id="caret-position" min="0" max="7" value="2" />
</label>
<button>Move caret</button>
JavaScript
const input = document.getElementById("caret-box");
const position = document.getElementById("caret-position");
document.querySelector("button").addEventListener("click", () => {
const index = position.valueAsNumber;
input.focus();
input.setSelectionRange(index, index);
});
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| HTML # dom-textarea/input-setselectionrange-dev |