On Internet Explorer, a contentEditable DIV creates a new paragraph (<p></p>
) each time you press Enter whereas Firefox creates a <br/>
tag.
As discussed here, it is possible to use JavaScript to intercept the Enter keyPress and use range.pasteHTML to create a <br/>
instead. But doing this breaks the Undo menu; once you hit Enter, you can no longer Undo past that point.
How can I force the contentEditable element to create single line breaks on Enter without breaking Undo?
To prevent contenteditable element from adding div on pressing enter with Chrome and JavaScript, we can listen for the keydown event on the contenteditable element and prevent the default behavior when Enter is pressed. to add a contenteditable div. document. addEventListener("keydown", (event) => { if (event.
Just set contentEditable="false" . See this answer.
Not an exact solution, but another workaround. If you use the markup:
<div contenteditable="true">
<div>
content
</div>
<div>
Then pressing enter will create new div
tags instead of p
tags.
Hold down shift when you press enter for breaks, don't hold it down for full paragraphs. This behaviour is the same by default in Firefox, given a contenteditable area containing a paragraph: i.e.
<div contenteditable="true">
<p>If you are typing here</p>
<div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With