HTMLTextAreaElement: Methode setRangeText()

Baseline Widely available

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

Die setRangeText()-Methode der HTMLTextAreaElement-Schnittstelle ersetzt einen Textbereich in einem <textarea>-Element mit einem neuen Text, der als Argument übergeben wird.

Zusätzliche optionale Parameter umfassen den Beginn des zu ändernden Textabschnitts, das Ende des Abschnitts und ein Schlüsselwort, das definiert, welcher Teil des <textarea>-Elements nach dem Aktualisieren des Textes ausgewählt sein sollte. Wenn die Argumente startSelection und endSelection nicht angegeben sind, wird der Bereich als Auswahl angenommen.

Das letzte Argument bestimmt, wie die Auswahl gesetzt wird, nachdem der Text ersetzt wurde. Mögliche Werte sind "select", das den neu eingefügten Text auswählt, "start", das die Auswahl direkt vor den eingefügten Text verschiebt, "end", das die Auswahl direkt nach den eingefügten Text verschiebt, oder der Standardwert "preserve", der versucht, die Auswahl beizubehalten.

Zusätzlich werden die select und selectionchange Events ausgelöst.

Syntax

js
setRangeText(replacement)
setRangeText(replacement, startSelection)
setRangeText(replacement, startSelection, endSelection)
setRangeText(replacement, startSelection, endSelection, selectMode)

Parameter

replacement

Der einzufügende String.

selectionStart Optional

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

selectionEnd Optional

Der 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 Verweis auf das Ende des Werts behandelt. Wenn selectionEnd kleiner als selectionStart ist, werden beide als der Wert von selectionEnd behandelt.

selectMode Optional

Ein Schlüsselwort, entweder select, start, end oder der Standardwert preserve, das definiert, wie die Auswahl gesetzt wird, nachdem der Text ersetzt wurde.

Rückgabewert

Keiner (undefined).

Beispiele

Klicken Sie auf die Schaltfläche in diesem Beispiel, um einen Teil des Textes in der Textbox zu ersetzen. Der neu eingefügte Text wird danach hervorgehoben (ausgewählt).

HTML

html
<label for="ta">Example text input:</label>
<textarea id="ta">
  This text has NOT been updated.
</textarea>
<button id="btn">Update text</button>

JavaScript

js
const btn = document.getElementById("btn");

btn.addEventListener("click", () => {
  changeText();
});

function changeText() {
  const textarea = document.getElementById("ta");
  textarea.focus();
  textarea.setRangeText("ALREADY", 14, 17, "select");
}

Ergebnis

Spezifikationen

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

Browser-Kompatibilität

Siehe auch