HTMLTextAreaElement: 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 July 2015.

Die setRangeText()-Methode der HTMLTextAreaElement-Schnittstelle ersetzt einen Textbereich in einem <textarea>-Element mit neuem 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> nach der Aktualisierung des Textes ausgewählt werden soll. Wenn die Argumente startSelection und endSelection nicht bereitgestellt werden, wird davon ausgegangen, dass der Bereich die Auswahl ist.

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

Zusätzlich werden die select und selectchange-Ereignisse 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 Wertes des Elements ist, wird als Verweis auf das Ende des Wertes behandelt.

selectionEnd Optional

Der Index des Zeichens nach dem letzten ausgewählten Zeichen. Ein Index, der größer als die Länge des Wertes des Elements ist, wird als Verweis auf das Ende des Wertes 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 festgelegt werden soll, nachdem der Text ersetzt wurde.

Rückgabewert

Keiner (undefined).

Beispiele

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

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 Standard
# dom-textarea/input-setrangetext-dev

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch