Ich habe ein contenteditable
Element und wann immer ich etwas schreibe und treffeENTER
, wird ein neues erstellt <div>
und der neue Zeilentext dort eingefügt. Ich mag das kein bisschen.
Ist es möglich, dies zu verhindern oder zumindest einfach durch a zu ersetzen? <br>
?
Hier ist die Demo http://jsfiddle.net/jDvau/
Hinweis: Dies ist kein Problem in Firefox.
Antworten:
Versuche dies:
Klicken Sie hier für eine Demo
quelle
Sie können dies mit nur einer CSS-Änderung tun:
http://jsfiddle.net/ayiem999/HW43Q/
quelle
Stil hinzufügen ,
display:inline-block;
umcontenteditable
es nicht zu generierendiv
,p
undspan
automatisch in Chrome.quelle
*[contenteditable="true"]{display: inline-block;}
<p></p>
:(Versuche dies:
http://jsfiddle.net/rooseve/jDvau/3/
quelle
input
nicht ausgelöst, wenn Sie die Eingabetaste drücken. Eine einfache Lösung: etw hinzufügen wie$(this).trigger('input')
insertHTML
Lösung macht einige seltsame Dinge, wenn es verschachteltecontenteditable
Elemente gibt. Ihre Lösung umgeht dies, aber es gibt noch einige weitere Probleme. Ich habe sie als neue mögliche Lösung hinzugefügt.Es überschreibt das Standardverhalten, stattdessen einen Absatz zu haben.
Auf Chrome lautet das Standardverhalten bei der Eingabe:
Mit diesem Befehl wird es sein
Jetzt, da es linearer ist, ist es einfach zu haben, nur
<br>
was Sie brauchen würden.quelle
Verwenden Sie shift+ enteranstatt enternur ein einzelnes
<br>
Tag einzufügen oder Ihren Text in<p>
Tags zu verpacken .quelle
Die Art und Weise,
contenteditable
wie Sie sich beim Drücken verhalten, enterhängt von den Browsern ab<div>
ab. Dies geschieht im Webkit (Chrome, Safari) und im Internet Explorer.Ich hatte vor ein paar Monaten damit zu kämpfen und habe es folgendermaßen korrigiert:
Ich hoffe es wird helfen und entschuldige mein Englisch, wenn es nicht so klar wie nötig ist.
BEARBEITEN : Korrektur der entfernten jQuery-Funktion
jQuery.browser
quelle
jQuery.browser
gehört nicht mehr zu jQuery.navigator.userAgent.indexOf("msie") > 0
undnavigator.userAgent.indexOf("webkit") > 0
if( ( e.keyCode || e.witch ) == 13 ) { ... }
muss seinif (e.keyCode === 13 || e.which === 13) { ... }
Ich verwende Mousetrap gerne zum Behandeln von Hotkeys: https://craig.is/killing/mice
Dann fange ich einfach das enter-Ereignis ab und führe einen Befehl insertLineBreak aus :
Es funktioniert mit Chrome 75 und dem folgenden bearbeitbaren Element:
Es ist auch möglich, insertHTML zu verwenden :
quelle
Fügen Sie dem div einen Verhindern-Standard hinzu
quelle
document.body.div
(Sie müssen wahrscheinlich einen anderen Code eingeben, um darauf hinzuweisen, dass esdiv
nur die allgemeine Idee ist)Ich würde Styling (Css) verwenden, um das Problem zu beheben.
Firefox fügt in der Tat einen Blockelementbruch hinzu
, während Chrome jeden Abschnitt in ein Tag einschließt. Sie CSS gibt Divs eine Auffüllung von 10px zusammen mit der Hintergrundfarbe.
Alternativ können Sie denselben gewünschten Effekt in jQuery replizieren:
Hier ist eine Gabel Ihrer Geige http://jsfiddle.net/R4Jdz/7/
quelle
contenteditable
Sie können
<p>
für jede Zeile separate Tags verwenden, anstatt<br>
Tags zu verwenden, und sofort eine bessere Browserkompatibilität erzielen.Fügen Sie dazu ein
<p>
Tag mit einem Standardtext in das inhaltsbearbeitbare div ein.Zum Beispiel anstelle von:
Verwenden:
jsfiddle
Getestet in Chrome, Firefox und Edge, und die zweite funktioniert jeweils gleich.
Der erste erstellt jedoch Divs in Chrome, erstellt Zeilenumbrüche in Firefox und in Edge erstellt Divs, und der Cursor wird am Anfang des aktuellen Divs zurückgesetzt, anstatt zum nächsten zu wechseln.
Getestet in Chrome, Firefox und Edge.
quelle
Sie können Ihre Absätze mit einem
<p>
Tag umschließen, das beispielsweise in einer neuen Zeile anstelle von div angezeigt wird. Beispiel:<div contenteditable="true"><p>Line</p></div>
Nach dem Einfügen einer neuen Zeichenfolge:
<div contenteditable="true"><p>Line</p><p>New Line</p></div>
quelle
Die
inserHTML
Befehlslösung macht einige seltsame Dinge, wenn Sie verschachteltecontenteditable
Elemente haben.Ich habe hier einige Ideen aus mehreren Antworten übernommen, und dies scheint vorerst meinen Bedürfnissen zu entsprechen:
quelle
Versuchen Sie es mit ckeditor. Es bietet auch eine Formatierung wie diese in SOF.
https://github.com/galetahub/ckeditor
quelle
Zuerst müssen wir jeden Schlüssel erfassen, den Benutzer eingeben, um zu sehen, ob die Eingabetaste gedrückt wird. Dann verhindern wir die
<div>
Erstellung und erstellen unsere eigenen<br>
Tag.Es gibt ein Problem: Wenn wir es erstellen, bleibt unser Cursor an derselben Position, sodass wir die Auswahl-API verwenden , um unseren Cursor am Ende zu platzieren.
Vergessen Sie nicht,
<br>
am Ende Ihres Textes ein Tag hinzuzufügen, da sonst bei der ersten Eingabe keine neue Zeile erstellt wird.Geige
quelle
Dies ist ein browsergesteuerter HTML5-Editor. Sie können Ihren Text mit
<p>...</p>
umbrechen und erhalten dann jedes Mal, wenn Sie die EINGABETASTE drücken<p></p>
. Außerdem funktioniert der Editor so, dass er bei jedem Drücken von UMSCHALT + EINGABE eingefügt wird<br />
.Überprüfen Sie dies: http://jsfiddle.net/ZQztJ/
quelle
Dies funktioniert in allen gängigen Browsern (Chrome, Firefox, Safari, Edge).
Es gibt eine Unannehmlichkeit. Nach Abschluss der Bearbeitung enthalten die Elemente möglicherweise eine Endung im
<br>
Inneren. Sie können jedoch Code hinzufügen, um dies bei Bedarf zu reduzieren.Überprüfen Sie diese Antwort, um das nachfolgende https://stackoverflow.com/a/61237737/670839 zu entfernen
<br>
quelle
Wo
this
ist der tatsächliche Kontext, was bedeutetdocument.getElementById('test');
.quelle
Ein anderer Weg, es zu tun
http://jsfiddle.net/jDvau/11/
quelle
Verhindern Sie die Erstellung neuer Divs in inhaltsbearbeitbaren Divs bei jeder Eingabetaste: Die Lösung, die ich gefunden habe, ist sehr einfach:
Dieser --- innerHTML-Inhalt verhindert die Erstellung neuer Divs in inhaltsbearbeitbaren Divs bei jeder Eingabetaste.
quelle
Im Entwurf des W3C-Editors finden Sie einige Informationen zum Hinzufügen von Status zu ContentEditable . Um zu verhindern, dass der Browser beim Drücken der Eingabetaste neue Elemente hinzufügt, können Sie diese verwenden
plaintext-only
.quelle
Es ist möglich, dieses Verhalten vollständig zu verhindern.
Sehen Sie diese Geige
quelle