avoid ie contentEditable element to create paragraphs on Enter key

Question

On InternetExplorer, a contentEditable DIV creates a new paragraph () each time you press Enter whereas Firefox creates a   tag. Is it possible to force IE to insert a   instead of a new paragraph ?

score 8 · Answer 1 · edited May 23 '17 at 11:53

Here's a solution (uses jQuery). After you click on the 'Change to BR' button, the   tag will be inserted instead of the  tag.

Html:

<div id='editable' contentEditable="true">
This is a division that is content editable. You can position the cursor 
within the text, move the cursor with the arrow keys, and use the keyboard 
to enter or delete text at the cursor position.
</div>
<button type="button" onclick='InsertBR()'>Change to BR</button>
<button type="button" onclick='ViewSource()'>View Div source</button>

Javascript:

function InsertBR()
{
    $("#editable").keypress(function(e) {
        if (e.which == 13) 
        {
            e.preventDefault();
            document.selection.createRange().pasteHTML("<br/>")     
        }
    });
}

function ViewSource()
{           
    var div = document.getElementById('editable');
    alert('div.innerHTML = ' + div.innerHTML);
}

These links helped. Working example here.

use `insertNode()` instead of `pasteHTML()` for IE11+ and cross browser as mentioned [here](http://stackoverflow.com/questions/6690752/insert-html-at-caret-in-a-contenteditable-div/6691294#6691294) — svnm, Oct 21 '15 at 00:33

score 7 · Accepted Answer · answered Jan 13 '10 at 15:58

7

Yes it is possible to avoid the insertion of paragraphs by stopping the keydown event first (window.event.stopPropagation();) and then inserting the string by using insert HTML command.

However, IE depends on this divs for setting styles etc. and you will get into trouble using s.

I suggest you using a project like TinyMCE or other editors and search for an editor which behaves the way you would like, since they have all kinds of workarounds for different browser issues. Perhaps you can find an editor which uses s...

answered Jan 13 '10 at 15:58

Jonathan Weiss

664
1
6
9

1

This strategy breaks Undo. Every time you hit Enter you mutate the DOM, so the user can no longer use the Undo menu to undo the change! – Dan Fabulich Feb 08 '10 at 10:40
2

Manipulating the DOM by using the commands does NOT break undo. Every command can be undone. Of course you must avoid stuff like div.innerHTML = "foo"; – Jonathan Weiss Feb 18 '10 at 15:01

score 6 · Answer 3 · edited Sep 05 '12 at 16:28

6

You can always learn to use SHIFT + ENTER for single line returns and ENTER for paragraph returns. IE behaves like MS Word in this respect.

edited Sep 05 '12 at 16:28

Zoltan Toth

46,981
12
120
134

answered Jan 29 '10 at 13:18

Fenton

241,084
71
387
401

score 1 · Answer 4 · edited Sep 05 '12 at 16:27

1

Changing the line-height of the  inside the editable <div> works:

#editable_div p
{
    line-height: 0px;
}

edited Sep 05 '12 at 16:27

Zoltan Toth

46,981
12
120
134

answered Sep 05 '12 at 15:37

user1649326

247
1
3
11

score 1 · Answer 5 · edited Sep 05 '12 at 16:29

1

If you can use it, FCKEditor has a setting for this

edited Sep 05 '12 at 16:29

Zoltan Toth

46,981
12
120
134

answered Jan 26 '10 at 18:53

Mason

8,767
10
33
34

avoid ie contentEditable element to create paragraphs on Enter key

5 Answers5

Linked