Maison >interface Web >js tutoriel >Comment puis-je obtenir la position du curseur dans un élément ContentEditable ?

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

Susan Sarandon
Susan Sarandonoriginal
2024-11-25 07:10:12333parcourir

How Can I Get the Caret Position in a ContentEditable Element?

Récupération de la position du curseur dans un élément ContentEditable

Contrairement à l'abondance de solutions pour définir la position du curseur dans les éléments contentEditable, déterminer sa la position actuelle s’est avérée insaisissable pour de nombreux développeurs. Cette question répond à cette lacune de connaissances spécifique.

Pour déterminer la position du curseur dans un élément contentEditable donné lors de la saisie de l'utilisateur, telle que les pressions sur une touche, on peut utiliser le code suivant :

function getCaretPosition(editableDiv) {
  var caretPos = 0,
    sel, range;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.rangeCount) {
      range = sel.getRangeAt(0);
      if (range.commonAncestorContainer.parentNode == editableDiv) {
        caretPos = range.endOffset;
      }
    }
  } else if (document.selection && document.selection.createRange) {
    range = document.selection.createRange();
    if (range.parentElement() == editableDiv) {
      var tempEl = document.createElement("span");
      editableDiv.insertBefore(tempEl, editableDiv.firstChild);
      var tempRange = range.duplicate();
      tempRange.moveToElementText(tempEl);
      tempRange.setEndPoint("EndToEnd", range);
      caretPos = tempRange.text.length;
    }
  }
  return caretPos;
}

Ce code fonctionne sous les hypothèses suivantes :

  • Le div modifiable contient un seul nœud de texte sans imbrication supplémentaire éléments.
  • La propriété CSS d'espace blanc pour le div modifiable n'est pas définie sur "pre".

Pour une solution plus complète qui s'adapte à un contenu plus complexe avec des éléments imbriqués, reportez-vous à la réponse Stack Overflow suivante : https://stackoverflow.com/a/4812022/96100

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:
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