Set cursor position auf contentEditable <div>

Dies ist kompatibel mit den standards-basierten Browsern, wird aber wahrscheinlich nicht im IE. Ich bin die Bereitstellung von it als Ausgangspunkt. IE unterstützt keine DOM-Bereich.

var editable = document.getElementById('editable'),
    selection, range;

//Populates selection and range variables
var captureSelection = function(e) {
    //Don't capture selection outside editable region
    var isOrContainsAnchor = false,
        isOrContainsFocus = false,
        sel = window.getSelection(),
        parentAnchor = sel.anchorNode,
        parentFocus = sel.focusNode;

    while(parentAnchor && parentAnchor != document.documentElement) {
        if(parentAnchor == editable) {
            isOrContainsAnchor = true;
        }
        parentAnchor = parentAnchor.parentNode;
    }

    while(parentFocus && parentFocus != document.documentElement) {
        if(parentFocus == editable) {
            isOrContainsFocus = true;
        }
        parentFocus = parentFocus.parentNode;
    }

    if(!isOrContainsAnchor || !isOrContainsFocus) {
        return;
    }

    selection = window.getSelection();

    //Get range (standards)
    if(selection.getRangeAt !== undefined) {
        range = selection.getRangeAt(0);

    //Get range (Safari 2)
    } else if(
        document.createRange &&
        selection.anchorNode &&
        selection.anchorOffset &&
        selection.focusNode &&
        selection.focusOffset
    ) {
        range = document.createRange();
        range.setStart(selection.anchorNode, selection.anchorOffset);
        range.setEnd(selection.focusNode, selection.focusOffset);
    } else {
        //Failure here, not handled by the rest of the script.
        //Probably IE or some older browser
    }
};

//Recalculate selection while typing
editable.onkeyup = captureSelection;

//Recalculate selection after clicking/drag-selecting
editable.onmousedown = function(e) {
    editable.className = editable.className + ' selecting';
};
document.onmouseup = function(e) {
    if(editable.className.match(/\sselecting(\s|$)/)) {
        editable.className = editable.className.replace(/selecting(\s|$)/, '');
        captureSelection();
    }
};

editable.onblur = function(e) {
    var cursorStart = document.createElement('span'),
        collapsed = !!range.collapsed;

    cursorStart.id = 'cursorStart';
    cursorStart.appendChild(document.createTextNode('—'));

    //Insert beginning cursor marker
    range.insertNode(cursorStart);

    //Insert end cursor marker if any text is selected
    if(!collapsed) {
        var cursorEnd = document.createElement('span');
        cursorEnd.id = 'cursorEnd';
        range.collapse();
        range.insertNode(cursorEnd);
    }
};

//Add callbacks to afterFocus to be called after cursor is replaced
//if you like, this would be useful for styling buttons and so on
var afterFocus = [];
editable.onfocus = function(e) {
    //Slight delay will avoid the initial selection
    //(at start or of contents depending on browser) being mistaken
    setTimeout(function() {
        var cursorStart = document.getElementById('cursorStart'),
            cursorEnd = document.getElementById('cursorEnd');

        //Don't do anything if user is creating a new selection
        if(editable.className.match(/\sselecting(\s|$)/)) {
            if(cursorStart) {
                cursorStart.parentNode.removeChild(cursorStart);
            }
            if(cursorEnd) {
                cursorEnd.parentNode.removeChild(cursorEnd);
            }
        } else if(cursorStart) {
            captureSelection();
            var range = document.createRange();

            if(cursorEnd) {
                range.setStartAfter(cursorStart);
                range.setEndBefore(cursorEnd);

                //Delete cursor markers
                cursorStart.parentNode.removeChild(cursorStart);
                cursorEnd.parentNode.removeChild(cursorEnd);

                //Select range
                selection.removeAllRanges();
                selection.addRange(range);
            } else {
                range.selectNode(cursorStart);

                //Select range
                selection.removeAllRanges();
                selection.addRange(range);

                //Delete cursor marker
                document.execCommand('delete', false, null);
            }
        }

        //Call callbacks here
        for(var i = 0; i < afterFocus.length; i++) {
            afterFocus[i]();
        }
        afterFocus = [];

        //Register selection again
        captureSelection();
    }, 10);
};

InformationsquelleAutor der Antwort eyelidlessness

Update

Ich geschrieben habe, eine cross-browser-Auswahl und-Auswahl-Bibliothek namens Feingliedrig , beinhaltet eine verbesserte version der code, den ich unten geschrieben. Sie können die Auswahl speichern und wiederherstellen-Modul für diese Frage, obwohl, ich würde geneigt sein, etwas zu verwenden, wie @Nico Brennt ' s Antwort wenn Sie nicht tun, alles andere, was die Auswahl der in Ihrem Projekt und brauchen nicht den Hauptteil der Bibliothek.

Vorherigen Antwort

können Sie IERange (http://code.google.com/p/ierange/) zu konvertieren IE TextRange in so etwas wie eine DOM-Bereich und verwenden Sie es in Verbindung mit etwas wie eyelidlessness Ausgangspunkt. Ich persönlich würde nur die algorithmen verwenden von IERange, die den Bereich <-> TextRange-Konvertierungen, anstatt die ganze Sache. Und IE ' s selection-Objekt hat nicht die focusNode und anchorNode Eigenschaften, aber Sie sollten in der Lage sein, um Sie nur den Bereich/TextRange-gewonnen aus der Selektion statt.

ich Schreibe dies vollständig irgendwann bald.

InformationsquelleAutor der Antwort Tim Down

Nach spielen um, die ich geändert habe eyelidlessness' Antwort oben und machte es zu einem jQuery-plugin, so können Sie nur tun, eine dieser:

var html = "The quick brown fox";
$div.html(html);

//Select at the text "quick":
$div.setContentEditableSelection(4, 5);

//Select at the beginning of the contenteditable div:
$div.setContentEditableSelection(0);

//Select at the end of the contenteditable div:
$div.setContentEditableSelection(html.length);

Entschuldigen Sie den langen code-post, aber vielleicht hilft es jemand:

$.fn.setContentEditableSelection = function(position, length) {
    if (typeof(length) == "undefined") {
        length = 0;
    }

    return this.each(function() {
        var $this = $(this);
        var editable = this;
        var selection;
        var range;

        var html = $this.html();
        html = html.substring(0, position) +
            '<a id="cursorStart"></a>' +
            html.substring(position, position + length) +
            '<a id="cursorEnd"></a>' +
            html.substring(position + length, html.length);
        console.log(html);
        $this.html(html);

        //Populates selection and range variables
        var captureSelection = function(e) {
            //Don't capture selection outside editable region
            var isOrContainsAnchor = false,
                isOrContainsFocus = false,
                sel = window.getSelection(),
                parentAnchor = sel.anchorNode,
                parentFocus = sel.focusNode;

            while (parentAnchor && parentAnchor != document.documentElement) {
                if (parentAnchor == editable) {
                    isOrContainsAnchor = true;
                }
                parentAnchor = parentAnchor.parentNode;
            }

            while (parentFocus && parentFocus != document.documentElement) {
                if (parentFocus == editable) {
                    isOrContainsFocus = true;
                }
                parentFocus = parentFocus.parentNode;
            }

            if (!isOrContainsAnchor || !isOrContainsFocus) {
                return;
            }

            selection = window.getSelection();

            //Get range (standards)
            if (selection.getRangeAt !== undefined) {
                range = selection.getRangeAt(0);

                //Get range (Safari 2)
            } else if (
                document.createRange &&
                selection.anchorNode &&
                selection.anchorOffset &&
                selection.focusNode &&
                selection.focusOffset
            ) {
                range = document.createRange();
                range.setStart(selection.anchorNode, selection.anchorOffset);
                range.setEnd(selection.focusNode, selection.focusOffset);
            } else {
                //Failure here, not handled by the rest of the script.
                //Probably IE or some older browser
            }
        };

        //Slight delay will avoid the initial selection
        //(at start or of contents depending on browser) being mistaken
        setTimeout(function() {
            var cursorStart = document.getElementById('cursorStart');
            var cursorEnd = document.getElementById('cursorEnd');

            //Don't do anything if user is creating a new selection
            if (editable.className.match(/\sselecting(\s|$)/)) {
                if (cursorStart) {
                    cursorStart.parentNode.removeChild(cursorStart);
                }
                if (cursorEnd) {
                    cursorEnd.parentNode.removeChild(cursorEnd);
                }
            } else if (cursorStart) {
                captureSelection();
                range = document.createRange();

                if (cursorEnd) {
                    range.setStartAfter(cursorStart);
                    range.setEndBefore(cursorEnd);

                    //Delete cursor markers
                    cursorStart.parentNode.removeChild(cursorStart);
                    cursorEnd.parentNode.removeChild(cursorEnd);

                    //Select range
                    selection.removeAllRanges();
                    selection.addRange(range);
                } else {
                    range.selectNode(cursorStart);

                    //Select range
                    selection.removeAllRanges();
                    selection.addRange(range);

                    //Delete cursor marker
                    document.execCommand('delete', false, null);
                }
            }

            //Register selection again
            captureSelection();
        }, 10);
    });
};

InformationsquelleAutor der Antwort mkaj

In Firefox müssen Sie möglicherweise den text der div in einem untergeordneten Knoten (o_div.childNodes[0])

var range = document.createRange();

range.setStart(o_div.childNodes[0],last_caret_pos);
range.setEnd(o_div.childNodes[0],last_caret_pos);
range.collapse(false);

var sel = window.getSelection(); 
sel.removeAllRanges();
sel.addRange(range);

InformationsquelleAutor der Antwort yoav