Obtenir la position du curseur dans contenteditable y compris les balises div

J'ai un contenteditable div dans lequel j'ai plusieurs balises (br, b, u, i) et le texte, et j'ai besoin d'obtenir la position du curseur par rapport à la div, y compris toutes les balises.

Par exemple:

<div id="h" contenteditable="true">abc<b>def<br>ghi</b>jkl</div>

Si le curseur se trouve entre g et h, j'ai besoin de la position du curseur à 14.
Le problème est que la trouvé des méthodes qui utilisent un treeWalker ne fonctionnent pas dans ce cas.
Le gras de la balise n'est pas trouvé... sans doute parce qu'il n'est pas fermé.
Aussi, j'ai essayé plusieurs méthodes, mais toujours pas de chance.

J'en ai besoin pour travailler dans Firefox.
Merci.

Pourquoi avez-vous besoin de ce numéro? C'est essentiellement inutile car il existe de nombreuses façons de représenter le même DOM avec différents HTML qui aura une incidence sur le nombre (par exemple en utilisant <br /> en place de <br>). Je suis en supposant que vous souhaitez afin que vous pouvez obtenir un décalage par rapport à la chaîne HTML que vous envoyez à partir du serveur vers le navigateur.
oui... c'est exactement pourquoi j'ai besoin de le nombre. J'ai essayé plusieurs moyens, mais toujours sans succès.
Il n'y a aucun moyen de retrouver l'original de la chaîne HTML via le DOM, de sorte que vous aurez besoin de re-demander la page via Ajax, analyser le code HTML et de le faire correspondre à l'actuel DOM. Il va être très difficile.

OriginalL'auteur helldrain | 2013-05-24

  1. 19

    Avez-vous essayé?
    Obtenir une gamme de début et de fin du décalage par rapport à son conteneur parent

    Lien Direct vers le jsfiddle:
    https://jsfiddle.net/TjXEG/1/

    Code de la fonction:

    function getCaretCharacterOffsetWithin(element) {
    var caretOffset = 0;
    if (typeof window.getSelection != "undefined") {
        var range = window.getSelection().getRangeAt(0);
        var preCaretRange = range.cloneRange();
        preCaretRange.selectNodeContents(element);
        preCaretRange.setEnd(range.endContainer, range.endOffset);
        caretOffset = preCaretRange.toString().length;
    } else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
        var textRange = document.selection.createRange();
        var preCaretTextRange = document.body.createTextRange();
        preCaretTextRange.moveToElementText(element);
        preCaretTextRange.setEndPoint("EndToEnd", textRange);
        caretOffset = preCaretTextRange.text.length;
    }
    return caretOffset;
}

function showCaretPos() {
    var el = document.getElementById("test");
    var caretPosEl = document.getElementById("caretPos");
    caretPosEl.innerHTML = "Caret position: " + getCaretCharacterOffsetWithin(el);
}

document.body.onkeyup = showCaretPos;
document.body.onmouseup = showCaretPos;
    Je vous remercie pour votre réponse. Le problème est que le <br> n'est pas pris en considération lors de la détermination de la position du curseur.
    Je me demande si vous avez réussi à trouver une solution qui inclut les balises.
    est-il une fonction qui inclut la longueur de la tags . ?

    OriginalL'auteur Eric McCormick

  2. 3

    juste dû le faire il y a donc une solution de travail (certains tests peuvent être requis)

    idée de base est de:

    1. obtenir textContent position à l'aide de cette méthode: Obtenez signe d'insertion (curseur) position dans contentEditable de la zone de contenu HTML

    2. itérer innerHTML d'un élément à l'textContent position

    3. si la balise html ou entité est rencontré, itérer dessus jusqu'à ce que normal char, puis continuer

    exemple de code ici:

    function getHTMLCaretPosition(element) {
var textPosition = getCaretPosition(element),
    htmlContent = element.innerHTML,
    textIndex = 0,
    htmlIndex = 0,
    insideHtml = false,
    htmlBeginChars = ['&', '<'],
    htmlEndChars = [';', '>'];


if (textPosition == 0) {
  return 0;
}

while(textIndex < textPosition) {

  htmlIndex++;

  //check if next character is html and if it is, iterate with htmlIndex to the next non-html character
  while(htmlBeginChars.indexOf(htmlContent.charAt(htmlIndex)) > -1) {
    //console.log('encountered HTML');
    //now iterate to the ending char
    insideHtml = true;

    while(insideHtml) {
      if (htmlEndChars.indexOf(htmlContent.charAt(htmlIndex)) > -1) {
        if (htmlContent.charAt(htmlIndex) == ';') {
          htmlIndex--; //entity is char itself
        }
        //console.log('encountered end of HTML');
        insideHtml = false;
      }
      htmlIndex++;
    }
  }
  textIndex++;
}

//console.log(htmlIndex);
//console.log(textPosition);
//in htmlIndex is caret position inside html
return htmlIndex;
}
    Vous êtes mon héros. Cela a fonctionné à merveille et m'a sauvé des heures de larmes.
    Quelle fonction est référencé pour getCaretPosition(element)? Il ne semble pas que vous avez compris sa définition.
    lire le premier point de la réponse, il y a un lien pour cette fonction

    OriginalL'auteur YangombiUmpakati