HTMLTextAreaElement : méthode setRangeText()

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨janvier 2020⁩.

La méthode setRangeText() de l'interface HTMLTextAreaElement remplace une plage de texte dans un élément HTML <textarea> par un nouveau texte passé en argument.

Des paramètres optionnels supplémentaires incluent le début de la section de texte à modifier, la fin de la section, et un mot-clé définissant quelle partie du <textarea> doit être sélectionnée après la mise à jour du texte. Si les arguments startSelection et endSelection ne sont pas fournis, la plage correspond à la sélection.

Le dernier argument détermine comment la sélection sera définie après le remplacement du texte. Les valeurs possibles sont "select", qui sélectionne le texte nouvellement inséré, "start", qui place la sélection juste avant le texte inséré, "end", qui place la sélection juste après le texte inséré, ou la valeur par défaut "preserve", qui tente de préserver la sélection.

De plus, les évènements select et selectionchange sont déclenchés.

Syntaxe

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

Paramètres

replacement: La chaîne de caractères à insérer.
selectionStart Facultatif: L'indice du premier caractère sélectionné. Un indice supérieur à la longueur de la valeur de l'élément est considéré comme pointant à la fin de la valeur.
selectionEnd Facultatif: L'indice du caractère après le dernier caractère sélectionné. Un indice supérieur à la longueur de la valeur de l'élément est considéré comme pointant à la fin de la valeur. Si selectionEnd est inférieur à selectionStart, alors les deux sont considérés comme ayant la valeur de selectionEnd.
selectMode Facultatif: Un mot-clé, soit select, start, end ou la valeur par défaut preserve, définissant comment la sélection doit être définie après le remplacement du texte.

<label for="ta">Exemple de saisie de texte&nbsp;:</label>
<textarea id="ta">
  Ce texte n'a PAS été mis à jour.
</textarea>
<button id="btn">Mettre à jour le texte</button>

JavaScript

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

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

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