Comment trouver la position du curseur dans un DIV contented?

Je suis en train d'écrire une autocomplétion pour un contenu modifiable DIV (nécessité de rendre le code html contenu dans la zone de texte. Donc préféré utiliser contenteditable DIV sur TEXTAREA). Maintenant, j'ai besoin de trouver la position du curseur lorsqu'il y a un keyup/keydown/cliquez sur l'événement à la DIV. Afin que je puisse insérer le code html/texte à cette position. Je suis un ignorant, comment je peux le trouver par calcul, ou est-il un natif de la fonctionnalité de navigateur qui pourrait m'aider à trouver la position du curseur dans un contententeditable DIV.

source d'informationauteur Sharief Shaik

  1. 31

    Si tout ce que vous voulez faire est d'insérer du contenu à l'aide du curseur, il n'y a pas besoin de trouver sa position de manière explicite. La fonction suivante permet d'ajouter un nœud DOM (élément ou nœud de texte) à la position du curseur dans tous les intégrer les navigateurs de bureau:

    function insertNodeAtCursor(node) {
    var range, html;
    if (window.getSelection && window.getSelection().getRangeAt) {
        range = window.getSelection().getRangeAt(0);
        range.insertNode(node);
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        html = (node.nodeType == 3) ? node.data : node.outerHTML;
        range.pasteHTML(html);
    }
}

    Si vous voulez insérer une chaîne HTML:

    function insertHtmlAtCursor(html) {
    var range, node;
    if (window.getSelection && window.getSelection().getRangeAt) {
        range = window.getSelection().getRangeAt(0);
        node = range.createContextualFragment(html);
        range.insertNode(node);
    } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().pasteHTML(html);
    }
}

    Mise à JOUR

    La suite de l'OP commentaires, je vous suggère d'utiliser mon propre Longiligne de la bibliothèque, ce qui ajoute une surcouche d'IE TextRange objet qui se comporte comme un DOM Gamme. Un DOM Gamme se compose de début et de fin de limite, chaque de ce qui est exprimé dans les termes d'un nœud et d'un décalage à l'intérieur de ce nœud, et un tas de méthodes pour la manipulation de la Gamme. Le MDC article devrait fournir une introduction.