Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Force IE contentEditable element to create line breaks on Enter key, without breaking Undo

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?

like image 784
Dan Fabulich Avatar asked Feb 08 '10 10:02

Dan Fabulich


People also ask

How do I stop Enter key in Contenteditable?

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.

How do I turn off Contenteditable Div?

Just set contentEditable="false" . See this answer.


2 Answers

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.

like image 94
Joel Avatar answered Sep 24 '22 08:09

Joel


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>
like image 21
Fenton Avatar answered Sep 26 '22 08:09

Fenton