So finden Sie cursor-position in eine contenteditable DIV?

Schreibe ich ein autocompleter für ein content-editable DIV (brauchen zum Rendern von html-Inhalten in das Textfeld ein. So verwenden bevorzugt contenteditable DIV über TEXTAREA). Nun ich muss die cursor-position, wenn es ein keyup/keydown/click-Ereignis in den DIV. So dass ich fügen Sie den html - /text an dieser position. Ich bin ratlos, wie ich finden kann, es durch irgendeine Berechnung oder gibt es eine native browser-Funktionalität, die mir helfen, finden Sie die cursor-position in eine contententeditable DIV.

InformationsquelleAutor der Frage Sharief Shaik | 2010-02-06

  1. 32

    Wenn alles, was Sie tun möchten, ist fügen Sie einige Inhalte auf den cursor, es gibt keine Notwendigkeit, um seine position ausdrücklich. Die folgende Funktion fügt einem DOM-node (ein element oder text-Knoten) an der cursor-position in allen mainstream-desktop-Browser:

    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);
    }
}

    Wenn Sie lieber legen Sie eine HTML-Zeichenkette:

    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);
    }
}

    UPDATE

    Folgenden die OP ' s Kommentare, ich schlage vor, mit meinem eigenen Feingliedrig Bibliothek, die fügt ein wrapper, um den IE TextRange Objekt, das verhält sich wie ein DOM-Bereich. Ein DOM-Bereich besteht aus einem start-und end-Grenze, jeweils ausgedrückt in einem Knoten und einem offset innerhalb dieses Knotens, und eine Reihe von Methoden zur Manipulation der Reihe. Die MDC Artikel sollte einige Einführung.

    InformationsquelleAutor der Antwort Tim Down

Schreibe einen Kommentar