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

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!