Comment positionner le curseur à la fin d'un textarea HTML ?
Bonjour, j'ai un textarea HTML qui contient du texte. J'aimerai que lorsqu'on arrive sur la page, le curseur se place automatiquement à la fin du texte. Je connais la fonction JavaScript focus() qui permet de positionner le curseur dans le textarea, mais il se positionne au début. Merci.
Vous pouvez en effet utiliser JavaScript pour positionner le curseur à la fin d'un textarea ; pour cela vous devez :
- Sélectionner le
textarea. - Compter le nombre de caractères qu'il contient.
- Déterminer la position du dernier caractère.
- Positionner le curseur après ce dernier caractère.
Pour sélectionner le textarea vous pouvez utiliser la méthode document.getElementById() :
var textarea = document.getElementById("textarea");
Pour compter le nombre de caractères il existe la propriété length :
const taille = textarea.value.length;
Pour déterminer et sélectionner la position du dernier caractère, vous pouvez utiliser la méthode setSelectionRange(). Cette méthode permet de définir la position de début et de fin d'une portion d'un texte contenu dans un input ou un textarea. Vous devez y spécifier deux arguments numériques, la position de début et de fin.
Ainsi, en y spécifiant deux fois la constante taille déterminée précédemment, vous sélectionnez le dernier caractère du textarea :
textarea.setSelectionRange(taille, taille);
Enfin, pour positionner le curseur à la position déterminée, on utilise la méthode focus() :
textarea.focus();
Voici donc comment positionner automatiquement le curseur à la fin d'un textarea avec JavaScript :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment positionner le curseur à la fin d'un textarea HTML ?</title>
</head>
<body>
<textarea id="textarea">Exemple</textarea>
<script>
var textarea = document.getElementById("textarea");
const taille = textarea.value.length;
textarea.setSelectionRange(taille, taille);
textarea.focus();
</script>
</body>
</html>