HTMLInputElement: setRangeText() Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Januar 2020⁩.

DieHTMLInputElement.setRangeText() Methode ersetzt einen Textbereich in einem<input> oder<textarea> Element mit einem neuen String.

Syntax

setRangeText(replacement)setRangeText(replacement, start)setRangeText(replacement, start, end)setRangeText(replacement, start, end, selectMode)

Parameter

replacement

Der einzufügende String.

startOptional

Der 0-basierte Index des ersten Zeichens, das ersetzt werden soll. Standardmäßig der aktuelle Wert vonselectionStart (der Beginn der aktuellen Benutzerauswahl).

endOptional

Der 0-basierte Index des Zeichensnach dem letzten zu ersetzenden Zeichen. Standardmäßig der aktuelle Wert vonselectionEnd (das Ende der aktuellen Benutzerauswahl).

selectModeOptional

Ein String, der definiert, wie die Auswahl nach dem Ersetzen des Textes gesetzt werden soll. Mögliche Werte:

"select" wählt den neu eingefügten Text aus.
"start" verschiebt die Auswahl direkt vor den eingefügten Text.
"end" verschiebt die Auswahl direkt hinter den eingefügten Text.
"preserve" versucht, die Auswahl beizubehalten. Dies ist der Standardwert.

<input  type="text"   size="30"  value="This text has NOT been updated." /><button>Update text</button>

JavaScript

function selectText() {  const input = document.getElementById("text-box");  input.focus();  input.setRangeText("ALREADY", 14, 17, "select");}document.querySelector("button").addEventListener("click", selectText);