Erzwinge IE contentEditable Elemente zum Erstellen von Zeilenumbrüchen mit der Eingabetaste, ohne Rückgängig zu machen
Auf Internet Explorer, eine contentEditable DIV wird ein neuer Absatz erstellt (<p></p>
) jedes mal, wenn Sie Enter drücken, während Firefox erstellt eine <br/>
tag.
Diskutiert, wie hierist es möglich mit JavaScript abfangen der Enter-Tastendruck-und Reichweite.pasteHTML zu erstellen <br/>
statt. Aber auf diese Weise bricht den Rückgängig-Menü; sobald Sie die EINGABETASTE drücken, können Sie nicht mehr Rückgängig über diesen Punkt.
Wie kann ich erzwingen, das contentEditable-element zum erstellen von single-line-breaks Geben, ohne zu brechen Rückgängig machen?
InformationsquelleAutor der Frage Dan Fabulich | 2010-02-08
Du musst angemeldet sein, um einen Kommentar abzugeben.
Nicht eine exakte Lösung, aber eine andere Lösung. Wenn Sie die markup:
Dann die Taste enter neue
div
- tags anstelle vonp
tags.InformationsquelleAutor der Antwort Joel
Halten Sie die Umschalttaste gedrückt, wenn Sie die EINGABETASTE drücken, für Pausen, nicht, halten Sie es nach unten, für full-Absätze. Dieses Verhalten ist das selbe, der standardmäßig in Firefox, da eine contenteditable-Bereich mit einem Absatz: also
InformationsquelleAutor der Antwort user75525
Vermutlich wirst du post editierbaren Inhalt an einen server. Daher sollten Sie sich nicht wirklich darum kümmern, ob Sie haben Absatz oder Pause-tags an Ort und Stelle, die der Benutzer bearbeitet, denn Sie können zum Parsen der HTML-vor Einreichung (oder auf dem server, wenn Sie möchten), und ersetzen Sie Instanzen von Absätzen mit Pausen. Dies hält die UNDO-queue im Betrieb für den Benutzer, aber Sie können Ihre HTML so sauber, wie Sie es wollen.
Werde ich weiter davon ausgehen, dass Sie genau wissen, welche DIV-Elemente werden contentEditable. Bevor das Formular abgeschickt wird, können Sie die Ausführung jeder contentEditable div über eine Funktion wie diese:
Und rufen Sie diese in einer Schleife (iteriert über alle contentEditable DIVs, mit einem array, ich nenne ceDivs), wie diese:
dann:
Einer Verbesserung (vor allem, wenn Sie nicht wollen, zu tun, dieses Recht auf Sendezeit), könnte es sein, reinigen Sie die Inhalte der div jede andere Zeit, die Sie mögen (onblur, was auch immer) zuweisen und den Inhalt jeder ceDiv zu seinen eigenen, unsichtbaren Formular-element für die spätere submission. In Kombination mit Ihrem eigenen CSS-Vorschlag oben, könnte dies für Sie arbeiten. Es nicht bewahren Sie Ihre literalen Anforderungen an die Buchstaben (D. H., es wird nicht Javascript IE Verhalten sich anders, als es codiert wurde unter der Decke zu Verhalten), aber für alle praktischen Zwecke, die Wirkung ist die gleiche. Die Nutzer bekommen, was Sie wollen und Sie bekommen, was Sie wollen.
Während Sie gerade dabei sind können Sie auch reinigen wollen, Raum strings im IE als auch. Wenn der Benutzer mehrere Leerzeichen (wie es einige immer noch tun, nach Perioden), was eingefügt wird von IE nicht [space][space] [space] , wird eine erste Leerzeichen-String.fromCharCode(32)) plus so viele Entitäten als dort sind Links in den Raum laufen.
InformationsquelleAutor der Antwort Robusto
Verwenden
<BR>
statt<P>
(Getestet in IE9. Vielleichtnbsp;
wird benötigt, in älteren Versionen nach<BR>
(pasteHTML("<br> "))
)Verwenden Sie es auf keydown-Ereignis:
InformationsquelleAutor der Antwort razor
Kann es unmöglich sein, um dieses Recht zu bekommen. Es ist jedoch möglich, um die
<p>
tags Aussehen wie einzelne Zeilenumbrüche, indem Sie die eingebaute Rand um Absatz-tags, CSS zu verwenden:Es ist ein Nachteil dieses Ansatzes: wenn der Benutzer braucht, um kopieren/einfügen von text in das contentEditable-element, der text kann angezeigt werden mit einfachem Zeilenabstand innerhalb des Elements, aber mit doppeltem Zeilenabstand außerhalb des Elements.
Schlimmer, zumindest in einigen Fällen, DH, wird automatisch erkannt, Doppel-Zeilenumbrüche beim einfügen, ersetzen Sie mit
<p>
- tags; diese wird versauen die Formatierung des eingefügten text.InformationsquelleAutor der Antwort Dan Fabulich
IE bindet den text-node mit einem
tag auf-Taste drücken. Erreichen Sie einen Zeilenumbruch +. Firefox fügt ein
tag auf-Taste drücken. Um das Verhalten Häufig über sowohl den Browser, können Sie Folgendes tun:
Angenommen, das folgende markup:
Javascript [übernehmen der folgende code wird in einer Funktion, die Schließung, so dass Sie nicht aufblasen die Seite mit globals]:
Hinweis: dieses script vor jQuery < 1.9 für die Nutzung des veralteten
$.browser
InformationsquelleAutor der Antwort nairvijays
Erwägen Sie die Verwendung
<span contenteditable="true"></span>
wenn Sie den Internet Explorer. Sie können nicht wollen, dies zu tun mit Chrome, da der Fokus sieht komisch aus. Sie werden wahrscheinlich wollen, um Ihre eigenenonfocus
undonblur
code.InformationsquelleAutor der Antwort George Bailey