Comment puis-je obtenir la position du curseur dans un élément ContentEditable ?

Obtenir la position du curseur ContentEditable

La détermination de la position actuelle du curseur dans un élément contentEditable peut être essentielle pour diverses tâches d'édition. Contrairement à la définition de la position du curseur, obtenir son emplacement actuel nécessite une approche plus complexe.

L'extrait de code fourni suppose un scénario simple avec un seul nœud de texte enfermé dans le div contentEditable. Si la propriété CSS white-space du div est définie sur pre, une approche plus sophistiquée est requise.

Implémentation

La fonction getCaretPosition récupère la position du curseur en utilisant différentes techniques selon sur le navigateur :

• Pour les navigateurs modernes prenant en charge window.getSelection(), le décalage de fin de la plage est utilisé pour déterminer la position du curseur.
• Pour les navigateurs existants utilisant document.selection, un élément auxiliaire est inséré pour calculer la position du curseur.

Utilisation

Dans l'exemple de code HTML et JavaScript fourni, la fonction de mise à jour met constamment à jour la position du curseur affichée dans le div #caretposition. En écoutant les événements de la souris (mousedown, mouseup) et du clavier (keydown, keyup), la position du curseur est capturée et affichée en temps réel lorsque l'utilisateur interagit avec l'élément contentEditable, fournissant une compréhension précise de l'emplacement actuel du curseur.

Considérations supplémentaires

Si vous rencontrez des situations où le contenu modifiable comporte des éléments imbriqués, reportez-vous à la méthode alternative décrite dans le lien réponse pour une approche plus globale. Cette solution gère plus efficacement les scénarios de contenu complexes.

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!