Erzwingen Sie das zufriedenbare Element, um Zeilenumbrüche auf der Eingabetaste zu erstellen, ohne das Rückstand zu brechen

Question

Im Internet Explorer erstellt ein zufriedenbares Div einen neuen Absatz (<p></p>) Jedes Mal, wenn Sie die Eingabetaste drücken, während Firefox a erstellt <br/> Schild.

Wie besprochen hier, Es ist möglich, JavaScript zu verwenden, um den Enter -Schlüsselpress abzufangen und Bereich zu verwenden.pastehtml, um a zu erstellen <br/> stattdessen. Aber dies bricht das Rückgängigmenü; Sobald Sie die Eingabetaste getroffen haben, können Sie diesen Punkt nicht mehr rückgängig machen.

Wie kann ich das zufriedenbare Element zwingen, einzelne Zeilenbrüche zu erstellen, ohne das Rückschlag zu sprengen?

Answer 1

Keine genaue Lösung, sondern eine andere Problemumgehung. Wenn Sie das Markup verwenden:

<div contenteditable="true">
<div>
content
</div>
<div>

Dann drücken Eintreten wird neu erstellen div Tags statt von p Stichworte.

Answer 2

Halten Sie die Verschiebung gedrückt, wenn Sie die Eingabetaste für Pausen drücken. Halten Sie sie nicht für vollständige Absätze ab. Dieses Verhalten ist in Firefox standardmäßig gleich, da ein zufriedenbarer Bereich mit einem Absatz enthält: dh

<div contenteditable="true">
    <p>If you are typing here</p>
<div>

Answer 3

Vermutlich veröffentlichen Sie den bearbeitbaren Inhalt auf einen Server zurück. Daher sollten Sie sich nicht wirklich darum kümmern, ob Sie Absatz- oder Break -Tags haben, während der Benutzer bearbeitet, da Sie die HTML vor der Einreichung (oder auf dem Server, wenn Sie möchten) analysieren und Instanzen von Absätzen durch Pausen ersetzen können. Dadurch wird die Rückgängigkeit für den Benutzer in Betrieb, aber Sie können Ihre HTML so sauber haben, wie Sie es möchten.

Ich werde ferner davon ausgehen, dass Sie genau wissen, welche Divelemente zufrieden sein werden. Bevor das Formular eingereicht wird, können Sie jede zufriedene Div durch eine solche Funktion ausführen:

function cleanContentEditableDiv(div) {
  var htmlString = div.innerHTML;
  htmlString     = htmlString.replace(/<\/p>/gim,"<br/>");
  htmlString     = htmlString.replace(/<p>/gim,"");
  return htmlString;
}

Und Sie nennen dies in einer Schleife (die alle zufriedenbaren Divs durch ein Array durchführt, das ich Cedivs nennen werde) wie folgt:

ceDivs[i].contentEditable = false; // to make sure IE doesn't try to coerce the contents again

und dann:

ceDivs[i].innerHTML = cleanContentEditableDiv(ceDivs[i]);

Eine Verbesserung dazu (insbesondere wenn Sie dies nicht zum Zeitpunkt der Einreichung tun möchten), könnte die Inhalte jedes solchen Divs auf jeden anderen Zeitpunkt reinigen (Onblur, was auch immer) und den Inhalt der einzelnen CEDIV zuzuordnen. eigenes unsichtbares Formularelement für die spätere Einreichung. Wird in Kombination mit Ihrem eigenen CSS -Vorschlag oben verwendet, kann dies für Sie funktionieren. Es bewahrt Ihre wörtlichen Anforderungen nicht an den Brief (dh JavaScript wird nicht dazu führen, dass sich der IE anders verhalten als unter den Deckblättern codiert wurde), aber für alle praktischen Zwecke ist der Effekt der gleiche. Die Benutzer bekommen das, was sie wollen, und Sie bekommen das, was Sie wollen.

Während Sie dabei sind, möchten Sie vielleicht auch Raumketten in IE reinigen. Wenn der Benutzer mehrere Leerzeichen (wie einige nach Zeiträumen noch tun) eingeben, ist das, was durch IE eingefügt wird Im Raumlauf sind noch übrig.

Answer 4

Verwenden <BR> Anstatt von <P> (Getestet in IE9. Vielleicht nbsp; wird in älteren Versionen danach benötigt <BR> (pasteHTML("<br>&nbsp;")) )

Verwenden Sie es beim Keydown -Ereignis:

if (e.keyCode == 13) {
 var range = document.selection.createRange();
 range.pasteHTML("<br> ");
 range.moveStart("character", 0);
 range.moveEnd("character", -1);
 range.select();
 return false;
}

Answer 5

Es kann unmöglich sein, dies richtig zu machen. Es ist jedoch möglich, das zu machen <p> Stichworte sehen Wie einzelne Linienbrüche, indem Sie den eingebauten Rand um Absatz-Tags mit CSS entfernen:

p { margin: 0; }

Es gibt einen Nachteil zu diesem Ansatz: Wenn der Benutzer Text im inhaltlichen Element kopieren/einfügen muss, scheint der Text im Element einzeln, aber doppelt außerhalb des Elements zu sein.

Schlimmer noch, in einigen Fällen erkennt der IE bei der Paste automatisch doppelte Pausen und ersetzt sie durch <p> Stichworte; Dies wird die Formatierung des eingefügten Textes durcheinander bringen.

Answer 6

Dh bindet den Textknoten mit a <p> Tag on Eintreten Tastendruck. Um eine Linienpause zu erreichen Wechsel+Eintreten. Firefox fügt a hinzu <br> Tag on Eintreten Tastendruck. Um das Verhalten in beiden Browsern üblich zu machen, können Sie Folgendes tun:

Nehmen Sie das folgende Markup an:

<div id="editableDiv" contentEditable="true"></div>

JavaScript [Angenommen, der folgende Code befindet sich in einem Funktionsverschluss, damit Sie die Seite nicht mit Globalen aufblähen]:

 (function () {
     //Initialize _shiftKeyPressed to false
     var _shiftKeyPressed = false;
     $('#editableDiv').live('keydown', function (e) {
         if (e.keyCode == 16) {
             // SHIFT key is pressed
             _shiftKeyPressed = true;
         }
     }).live('keyup', function (e) {
         if (e.keyCode == 16) {
             // SHIFT key is release
             _shiftKeyPressed = false;
         }
     }).live('keypress', function (e) {
         if (e.keyCode == 13 && !_shiftKeyPressed && !jQuery.browser.msie) {
             // Insert a PARAGRAPH in Firefox instead of a BR
             // Ignores SHIFT + ENTER
             document.execCommand("insertParagraph", false, true);
         }
     })
 })();

Notiz: Dieses Skript erfolgt vor jQuery <1,9 für die Verwendung des Versimgelten $.browser

Answer 7

Erwägen Sie zu verwenden <span contenteditable="true"></span> Bei Verwendung von Internet Explorer. Möglicherweise möchten Sie dies nicht mit Chrome tun, weil der Fokus lustig aussieht. Sie werden wahrscheinlich Ihre eigenen implementieren wollen onfocus und onblur Code.