Warum Ist Mein Contenteditable Cursor Springt an das Ende in Chrome?

Das problem ist, dass Ihr contenteditable element ist ein div werden, welche standardmäßig display: block. Dies ist, was bewirkt, dass Ihr Cursor-position problem. Dies kann behoben werden, indem die äußersten div nicht-editierbare und das hinzufügen eines neuen bearbeitbaren div behandelt wird, als inline-block.

Den neuen HTML-hätte eine neue div nur innerhalb der äußeren (und die entsprechende schließende tag am Ende):

<div id="main" class="main"><div id="editable" contenteditable="true">...

Und fügen Sie diese in Ihre CSS:

div#editable {
    display: inline-block;
}

Willen zu sehen, die Einfügemarke besser, wenn es zwischen span Elemente, außerdem habe ich margin: 2px der Regel für div.main span im CSS, aber das ist nicht notwendig, um zu verhindern, dass die Einfügemarke springt Ausgabe berichtet, in Frage stellen.

Hier ist ein fiddle.

Als Sie begonnen haben zu entdecken, contenteditable behandelt wird inkonsistent zwischen den Browsern. Ein paar Jahre zurück, ich begann die Arbeit an einem Projekt (in-browser XML-editor) wo ich dachte contenteditable würde alles einfacher machen. Dann, als ich entwickelte die Anwendung, ich fand mich bald übernehmen die Funktionen, die ich dachte contenteditable mir geben würde, kostenlos. Heute die einzige Sache, die contenteditable mir ist, dass sich auf Tastatur-Ereignisse auf Elemente, die ich Bearbeiten möchte. Alles andere, inklusive Cursor-Bewegung und caret-Zeichen angezeigt, verwaltet durch benutzerdefinierten code.

Habe ich eine gefunden hacky Weise zu lösen, die ersten problem der cursor Fehlverhalten am Ende der <div> mit einigen JQuery. Ich bin grundsätzlich einfügen einer leeren <i> für den cursor zu "Riegel" auf, um am Ende der <div> Inhalt. Dieser tag funktioniert für mich, weil es keine UI Unterschied für den Endbenutzer, wenn die Umsteuerung dieser vom normalen text durch überschreiben font-style: normal (siehe fiddle), und ich musste auch mal etwas anderes als <span> einfügen

Ich bin nicht besonders begeistert mit dieser Problemumgehung, vor allem die Wahl einer <i> nur da, aber ich bin nicht gekommen, über eine bessere alternative, und ich immer noch offen für bessere Lösungen - wenn vorhanden!. Ich Plane, weiter zu arbeiten an diesem, um hoffentlich herauszufinden, die Pfeil-Tasten als gut, aber zum Glück bin ich nur gestört durch diese Panne in der Fiddle und nicht mein code.

Geige (Chrome only)

<div id="main" contenteditable="true">
    <span contenteditable="false">item</span>
    <span contenteditable="false">item</span>
    <span contenteditable="false">item</span>
</div>

function hackCursor() {    
    return $('#main :last-child').get(0).tagName === 'SPAN' ? 
        $('#main span:last-child').after('<i style="font-style: normal"></i>') : 
        false;
}

$(function(){

    hackCursor();

    $('#main').bind({
        'keyup': function(e) {
            hackCursor();
        }
    })
});