Comment positionner le curseur à la fin du texte dans un champ de saisie de texte en utilisant JavaScript ?-js tutoriel-php.cn

Table des matières

Utilisez la méthode setSelectionRange()

Grammaire

Exemple

Utilisez les propriétés selectionStart et selectionEnd

Conclusion

Maison

interface Web

js tutoriel

Comment positionner le curseur à la fin du texte dans un champ de saisie de texte en utilisant JavaScript ?

Aug 27, 2023 pm 02:09 PM

如何使用 JavaScript 将光标位置放置在文本输入字段中的文本末尾？

En HTML, les champs de saisie sont utilisés pour obtenir les entrées de l'utilisateur. Parfois, nous devons recevoir une chaîne ou un long message texte en entrée. Dans ces scénarios, l'utilisateur devra peut-être aller à la fin du champ de saisie pour ajouter plus de contenu ou de messages. Nous devrions donc configurer quelque chose pour que l'utilisateur puisse cliquer sur le bouton et aller à la fin du champ de saisie. Dans ce tutoriel, nous allons apprendre à utiliser JavaScript pour positionner le curseur à la fin du texte dans un champ de saisie.

Utilisez la méthode setSelectionRange()

La méthode

setSelectionRange() est utilisée pour sélectionner du texte dans le champ de saisie. Deux paramètres sont requis pour démarrer et terminer la sélection. Nous pouvons sélectionner le dernier caractère en utilisant la méthode setSelectionRange(), en plaçant le curseur à la fin du texte.

Grammaire

Les utilisateurs peuvent utiliser la méthode setSelectionRange() selon la syntaxe suivante pour placer le curseur à la fin du texte.

input.setSelectionRange(len, len);

Copier après la connexion

Dans la syntaxe ci-dessus, l'entrée est l'élément HTML auquel nous accédons en JavaScript. "len" est la longueur de la valeur d'entrée.

Exemple

Dans l'exemple ci-dessous, nous avons créé des champs de saisie et des boutons. Lorsque l'utilisateur clique sur le bouton, il exécute la fonction moveAtend().

En JavaScript, nous avons défini la fonction moveAtend(), qui accède au champ de saisie "Nom". Après cela, il définit le focus sur le champ de saisie à l'aide de la méthode focus(). Après cela, nous utilisons la méthode setSelectionRange() en passant la longueur de la valeur d'entrée sous forme de deux paramètres. Dans la sortie, l'utilisateur peut cliquer sur le bouton et le regarder définir la position du curseur à la fin du texte.

&lt;html&gt;
   &lt;body&gt;
      &lt;h3&gt; Using the &lt;i&gt; setSelectionRange() method &lt;/i&gt; to move the cursor at the end of the input field in JavaScript &lt;/h3&gt;
      &lt;input type = "text" id = "name" value = "Shubham"&gt;
      &lt;button onclick = "moveAtend()"&gt; Move cursor at end &lt;/button&gt;
      &lt;script&gt;
         let output = document.getElementById("output");
         function moveAtend() {
         let name = document.getElementById("name");
         name.focus();
         name.setSelectionRange(name.value.length, name.value.length);
         }
      &lt;/script&gt;
&lt;/html&gt;

Copier après la connexion

Utilisez les propriétés selectionStart et selectionEnd

Les propriétés CSS « SelectionStart » et « SelectionEnd » sont utilisées pour sélectionner les valeurs d'entrée dans les champs de saisie. "selectionStart" prend la valeur d'index à partir de laquelle nous avons commencé la sélection, et "selectionEnd" prend la valeur d'index à partir de laquelle nous devons terminer la sélection de texte.

Ici, nous pouvons définir la valeur des propriétés "selectionStart" et "selectionEnd" égale à la longueur du texte pour positionner le curseur à la fin du texte.

Grammaire

Les utilisateurs peuvent utiliser les propriétés "selectionStart" et "selectionEnd" pour placer le curseur à la fin du texte en utilisant la syntaxe suivante.

input.selectionStart = len;
input.selectionEnd = len;

Copier après la connexion

Dans la syntaxe ci-dessus, input est un élément HTML et « len » est la longueur de sa valeur.

Exemple

Comme le premier exemple, nous créons les champs de saisie dans l'exemple ci-dessous. Dans la fonction moveAtend(), nous définissons la valeur des propriétés "selectionStart" et "selectionEnd" égale à la longueur du texte du champ de saisie "name".

&lt;html&gt;
   &lt;body&gt;
      &lt;h3&gt; Using the &lt;i&gt; selectionStart and selectionEnd Properties &lt;/i&gt; to move the cursor at the end of the input field in JavaScript &lt;/h3&gt;
      &lt;input type = "text" id = "name" value = "Shubham"&gt;
      &lt;button onclick = "moveAtend()"&gt; Move cursor at end &lt;/button&gt;
      &lt;script&gt;
         let output = document.getElementById("output");
         function moveAtend() {
         let name = document.getElementById("name");
         name.focus();
         name.selectionStart = name.value.length;
         name.selectionEnd = name.value.length;
         }
      &lt;/script&gt;
&lt;/html&gt;

Copier après la connexion

Conclusion

Nous avons appris deux façons de positionner le curseur à la fin d'une valeur de texte dans un champ de saisie. Dans la première méthode, nous avons utilisé la méthode setSelectionRange() ; dans la deuxième méthode, nous avons utilisé les propriétés "selectionStart" et "selectionEnd". Cependant, les deux méthodes sont presque identiques, la méthode setSelectionRange() prend les valeurs finales "selectionStart" et "selection" comme paramètres.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn