Setzen Sie die Caret-Position direkt nach dem eingefügten Element in einem contentEditable div

Ich bin einfügen eines Elements in eine contentEditable div, aber der browser setzt die position des Cursors vor dem eingefügten element. Ist es möglich, den cursor direkt nach dem element eingefügt, so dass der Benutzer speichert die Eingabe, ohne zu re-justieren Sie die position des Cursors?

InformationsquelleAutor der Frage Elie | 2011-01-29

  1. 28

    Der folgenden Funktion tun. DOM Level 2 Range-Objekte stellen Sie diese einfach in den meisten Browsern. Im IE, müssen Sie fügen Sie eine Marke ein element nach dem Knoten, den Sie sind, einfügen, bewegen Sie die Auswahl auf und dann entfernen Sie es.

    Live-Beispiel: http://jsfiddle.net/timdown/4N4ZD/

    Code:

    function insertNodeAtCaret(node) {
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var range = sel.getRangeAt(0);
            range.collapse(false);
            range.insertNode(node);
            range = range.cloneRange();
            range.selectNodeContents(node);
            range.collapse(false);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    } else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
        var html = (node.nodeType == 1) ? node.outerHTML : node.data;
        var id = "marker_" + ("" + Math.random()).slice(2);
        html += '<span id="' + id + '"></span>';
        var textRange = document.selection.createRange();
        textRange.collapse(false);
        textRange.pasteHTML(html);
        var markerSpan = document.getElementById(id);
        textRange.moveToElementText(markerSpan);
        textRange.select();
        markerSpan.parentNode.removeChild(markerSpan);
    }
}

    Alternativ, Sie könnte meine Feingliedrige Bibliothek. Der entsprechende code würde es

    function insertNodeAtCaret(node) {
    var sel = rangy.getSelection();
    if (sel.rangeCount) {
        var range = sel.getRangeAt(0);
        range.collapse(false);
        range.insertNode(node);
        range.collapseAfter(node);
        sel.setSingleRange(range);
    }
}

    InformationsquelleAutor der Antwort Tim Down

  2. 0

    Wenn Sie einfügen einer leeren div -, p-oder span -, ich glaube, es muss "etwas" in der neu erstellten element für den Bereich greifen auf -- und um das caret-Zeichen drin.

    Hier mein hack, das scheint zu funktionieren OK in Chrom. Die Idee ist einfach eine temporäre Zeichenfolge in das element, dann entfernen Sie es, sobald Sie die Einfügemarke in es.

    //Get the selection and range
var idoc = document; //(In my case it's an iframe document)
var sel = idoc.getSelection();
var range = sel.getRangeAt(0);

//Create a node to insert
var p = idoc.createElement("p"); //Could be a div, span or whatever

//Add "something" to the node.
var temp = idoc.createTextNode("anything");
p.appendChild(temp);
//-- or --
//p.innerHTML = "anything";

//Do the magic (what rangy showed above)
range.collapse(false);
range.insertNode( p );
range = range.cloneRange();
range.selectNodeContents(p);
range.collapse(false);
sel.removeAllRanges();
sel.addRange(range);

//Clear the non
p.removeChild(p.firstChild);
//-- or --
//p.innerHTML = "";

    InformationsquelleAutor der Antwort bob

Schreibe einen Kommentar