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

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

Zusätzliche optionale Parameter umfassen den Beginn des zu ändernden Textabschnitts, das Ende des Abschnitts und ein Schlüsselwort, das bestimmt, welcher Teil des <textarea> nach der Aktualisierung des Textes ausgewählt werden soll. Wenn die Argumente startSelection und endSelection nicht bereitgestellt werden, wird der Bereich als die Auswahl angenommen.

Das letzte Argument bestimmt, wie die Auswahl nach dem Ersetzen des Textes gesetzt wird. Die möglichen Werte sind "select", welches den neu eingefügten Text auswählt, "start", welches die Auswahl direkt vor den eingefügten Text bewegt, "end", welches die Auswahl direkt hinter den eingefügten Text bewegt, oder der Standardwert "preserve", welcher versucht, die Auswahl zu bewahren.

Zusätzlich werden die Ereignisse select und selectchange ausgelöst.

Syntax

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

Parameter

replacement

Der einzusetzende String.

selectionStart Optional

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

selectionEnd Optional

Der Index des Zeichens nach dem letzten ausgewählten Zeichen. Ein Index, der größer ist als die Länge des Werts des Elements, wird als der Wert am Ende behandelt. Wenn selectionEnd kleiner ist als selectionStart, werden beide als der Wert von selectionEnd behandelt.

selectMode Optional

Ein Schlüsselwort, entweder select, start, end oder der Standardwert preserve, welches definiert, wie die Auswahl nach dem Ersetzen des Textes gesetzt werden soll.

Rückgabewert

Keiner (undefined).

Beispiele

Klicken Sie auf die Schaltfläche in diesem Beispiel, um einen Teil des Textes im Textfeld 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("text-box");
  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