HTMLInputElement : 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 HTMLInputElement remplace une plage de texte dans un élément <input> ou <textarea> par une nouvelle chaîne de caractères.

Syntaxe

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

Paramètres

replacement

La chaîne de caractères à insérer.

start Facultatif

L'indice (à partir de 0) du premier caractère à remplacer. Par défaut, la valeur actuelle de selectionStart (le début de la sélection de l'utilisateur·ice).

end Facultatif

L'indice (à partir de 0) du caractère après le dernier caractère à remplacer. Par défaut, la valeur actuelle de selectionEnd (la fin de la sélection de l'utilisateur·ice).

selectMode Facultatif

Une chaîne de caractères définissant la façon dont la sélection doit être réglée après le remplacement du texte. Valeurs possibles :

"select" sélectionne le texte nouvellement inséré.
"start" déplace la sélection juste avant le texte inséré.
"end" déplace la sélection juste après le texte inséré.
"preserve" tente de préserver la sélection. C'est la valeur par défaut.

<input
  type="text"
  id="text-box"
  size="30"
  value="Ce texte n'a PAS été mis à jour." />
<button>Mettre à jour le texte</button>

JavaScript

function selectText() {
  const input = document.getElementById("text-box");
  input.focus();
  input.setRangeText("DÉJÀ", 14, 17, "select");
}

document.querySelector("button").addEventListener("click", selectText);