Wie man den Cursor zum Ende der Entity bewegt, die zufrieden ist

Gibt es auch ein anderes problem.

Den Nico Brennt's Lösung funktioniert, wenn der contenteditable div nicht enthalten andere Elemente mehrzeilig.

Zum Beispiel, wenn ein div enthält andere divs, und diese anderen divs enthalten andere Sachen im inneren, der auftreten konnte, einige Probleme.

Um Sie zu lösen, habe ich angeordnet, die folgende Lösung, die eine Verbesserung der Nico's:

//Namespace management idea from http://enterprisejquery.com/2010/10/how-good-c-habits-can-encourage-bad-javascript-habits-part-1/
(function( cursorManager ) {

    //From: http://www.w3.org/TR/html-markup/syntax.html#syntax-elements
    var voidNodeTags = ['AREA', 'BASE', 'BR', 'COL', 'EMBED', 'HR', 'IMG', 'INPUT', 'KEYGEN', 'LINK', 'MENUITEM', 'META', 'PARAM', 'SOURCE', 'TRACK', 'WBR', 'BASEFONT', 'BGSOUND', 'FRAME', 'ISINDEX'];

    //From: https://stackoverflow.com/questions/237104/array-containsobj-in-javascript
    Array.prototype.contains = function(obj) {
        var i = this.length;
        while (i--) {
            if (this[i] === obj) {
                return true;
            }
        }
        return false;
    }

    //Basic idea from: https://stackoverflow.com/questions/19790442/test-if-an-element-can-contain-text
    function canContainText(node) {
        if(node.nodeType == 1) { //is an element node
            return !voidNodeTags.contains(node.nodeName);
        } else { //is not an element node
            return false;
        }
    };

    function getLastChildElement(el){
        var lc = el.lastChild;
        while(lc && lc.nodeType != 1) {
            if(lc.previousSibling)
                lc = lc.previousSibling;
            else
                break;
        }
        return lc;
    }

    //Based on Nico Burns's answer
    cursorManager.setEndOfContenteditable = function(contentEditableElement)
    {

        while(getLastChildElement(contentEditableElement) &&
              canContainText(getLastChildElement(contentEditableElement))) {
            contentEditableElement = getLastChildElement(contentEditableElement);
        }

        var range,selection;
        if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
        {    
            range = document.createRange();//Create a range (a range is a like the selection but invisible)
            range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range
            range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
            selection = window.getSelection();//get the selection object (allows you to change selection)
            selection.removeAllRanges();//remove any selections already made
            selection.addRange(range);//make the range you have just created the visible selection
        }
        else if(document.selection)//IE 8 and lower
        { 
            range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
            range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range
            range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
            range.select();//Select the range (make it the visible selection
        }
    }

}( window.cursorManager = window.cursorManager || {}));

Verwendung:

var editableDiv = document.getElementById("my_contentEditableDiv");
cursorManager.setEndOfContenteditable(editableDiv);

In dieser Weise, wird der cursor ist sicherlich positioniert am Ende des letzten Elements, schließlich verschachtelt.

EDIT #1: um zu allgemeineren while-Anweisung sollten überlegen, auch alle anderen tags, die nicht die text enthalten. Diese Elemente heißen leere Elementeund in diese Frage es gibt einige Methoden auf, wie um zu testen, ob ein element ist ungültig. Also, unter der Annahme, dass es eine Funktion namens canContainText zurückgibt true wenn das kein argument ist ungültig element der folgende code-Zeile:

contentEditableElement.lastChild.tagName.toLowerCase() != 'br'

sollte ersetzt werden mit:

canContainText(getLastChildElement(contentEditableElement))

EDIT #2: Der obige code ist komplett aktualisiert, mit allen Veränderungen beschrieben und diskutiert

InformationsquelleAutor der Antwort Vito Gentile

Es möglich ist, setzen Sie den cursor an das Ende durch die Reihe:

setCaretToEnd(target/*: HTMLDivElement*/) {
  const range = document.createRange();
  const sel = window.getSelection();
  range.selectNodeContents(target);
  range.collapse(false);
  sel.removeAllRanges();
  sel.addRange(range);
  target.focus();
  range.detach(); //optimization

  //set scroll to the end if multiline
  target.scrollTop = target.scrollHeight; 
}

InformationsquelleAutor der Antwort Andrew