contenteditable div backspace und löschen von text-Knoten Probleme
Gibt es so viele Probleme mit contenteditable divs und löschen von html-und/oder inhaltlich nicht editierbare Inhalte in bearbeitbaren divs.
Über eine Antwort durch die ausgezeichnete Tim hier Unten: So löschen Sie ein HTML-element in einem div mit dem Attribut contentEditable?
Mit Tim ' s code, das den gesamten text-Knoten gelöscht wird. Ich brauche diese Arbeit, wie jede textarea wäre, das löschen von Zeichen und nur sicherstellen, dass html-Elemente backspaced als gut.
Ich habe versucht, die folgenden
else if(node){
var index = node.length-1;
if(index >= 0)
node.deleteData(index,1);
else
this.removeChild(node);
}Aber das ist offensichtlich nicht korrekt funktioniert. Wenn ich mich am Ende der Inhalt, die Dinge so funktionieren, wie erwartet. Aber wenn ich den cursor irgendwo anders, es ist immer noch das löschen vom Ende.
Bin ich verloren an diesem Punkt, jede Hilfe wird sehr geschätzt
http://jsfiddle.net/mstefanko/DvhGd/1/
InformationsquelleAutor mstef | 2013-07-26
Du musst angemeldet sein, um einen Kommentar abzugeben.
Nach brechen wie google verwendet contenteditable divs in Ihrer google-plus-Nutzer-tagging, landete ich auf einer viel vernünftigere Lösung. Vielleicht hilft es jemand anderes.
Nach Zugabe von 1 tag kann man bereits sehen, eine Menge Unterschiede in der html-browser.
In Google Chrome, wird ein Leerzeichen Hinzugefügt, die mit jedem tag. Der button-tag verwendet. Und die chrome-nur contenteditable="Text-only" eingesetzt wird.
Wenn ich die Rücktaste, Raum, in Chrom, ein BR-tag wird dann angehängt.
In Firefox das BR-tag Hinzugefügt wird sofort mit dem ersten tag. Keine Leerzeichen erforderlich. Und ein input-tag wird anstelle der Schaltfläche-tag ein.
Den BR-tag war der größte Durchbruch hatte ich beim Graben durch dieses. Vor dem hinzufügen dieser, es war eine Menge der schrulligen Verhalten mit dem löschen von tags, sowie Fokus-Themen.
Im IE mehr interessante änderungen vorgenommen wurden. Ein span mit contenteditable false verwendet für die tags hier. Keine leer-oder BR-tags, aber eine leere text-Knoten.
Mit allem, brauchen Sie nicht zu kopieren google genau.
Die wichtigen Teile:
Wenn Sie die Darstellung von HTML, das folgende tun...
1. Chrome sollte verwenden Sie den button tag
2. Firefox/IE sollte mit dem input-tag
Für Bereich/Auswahl möchten Sie normalerweise behandeln Dinge wie tags, die als ein einzelnes Zeichen. Sie können diesen in Ihrem Bereich/Auswahl-Logik, aber das Verhalten der input/button-tags ist viel mehr im Einklang, und so weniger code.
IE verhält sich besser in IE7-8 mit einem span. Nur aus UI-Sicht. Aber wenn Sie nicht kümmern, wenn Ihre Website ist ziemlich in alten IE-Versionen, die Eingabe auf das richtige Verhalten im IE sowie firefox.
3. Chrome nur, verwenden Sie das contenteditable="Text-only" - Attribut auf Ihre editierbaren div.
Ansonsten viele seltsame Probleme geschehen, nicht nur, wenn ein Benutzer versucht, fügen Sie rich-text, aber auch beim löschen von html-Elemente, manchmal die Stile können übertragen zu bekommen, um das div, bemerkte ich viele merkwürdige Probleme mit diesem.
4. Wenn Sie benötigen, um die position der Einfügemarke an das Ende des div, legen Sie das Ende des Bereichs vor dem BR.
für FireFox:
InformationsquelleAutor mstef