Comment puis-je positionner par programme le curseur dans un élément modifiable ?

Placer le curseur à une position spécifique dans un élément modifiable

Lorsqu'il s'agit d'éléments modifiables, la possibilité de définir le curseur (caret) à un poste particulier peut être crucial. Cependant, y parvenir n'est peut-être pas simple.

Dans la plupart des navigateurs Web, l'utilisation des objets Range et Selection est la clé. En spécifiant chaque limite de sélection en tant que nœud et un décalage à l'intérieur de ce nœud, vous pouvez contrôler le placement du curseur.

Pour illustrer, considérons un exemple HTML simple avec un div contenteditable :

<div>

Imaginez maintenant que vous souhaitiez placer le curseur au cinquième caractère de la deuxième ligne de texte. Pour y parvenir, suivez ces étapes :

1. Créez un objet de plage :

   var range = document.createRange();

2. Définissez la sélection Limites :

   var myDiv = document.getElementById("editable");
   range.setStart(myDiv.childNodes[2], 5);
   range.collapse(true);

   • myDiv.childNodes[2] fait référence à la deuxième ligne de texte.
   • range.setStart() définit le début de la plage de sélection sur le cinquième caractère de ce nœud.
   • range.collapse(true) réduit la plage en un caret position.

3. Définissez la sélection :

   var sel = window.getSelection();
   sel.removeAllRanges();
   sel.addRange(range);

   • window.getSelection() renvoie l'objet Selection.
   • sel.removeAllRanges() supprime tout élément existant sélection.
   • sel.addRange(range) définit la nouvelle plage de sélection.

4. Déclenchez la fonction :
   Attachez le code ci-dessus à un événement de clic sur le bouton :

   document.getElementById("button").addEventListener("click", setCaret);

Par en suivant ces étapes, vous pouvez maintenant définir par programme la position du curseur dans un élément contenteditable.

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!