6

I am trying to insert a newline character instead of whatever the browser wants to insert when I press enter in a contenteditable div.

My current code looks something like this:

if (e.which === 13) {
        e.stopPropagation();
        e.preventDefault();

        var selection = window.getSelection(),
            range = selection.getRangeAt(0),
            newline = document.createTextNode('\n');

        range.deleteContents();
        range.insertNode(newline);
        range.setStartAfter(newline);
        range.setEndAfter(newline);
        range.collapse(false);
        selection.removeAllRanges();
        selection.addRange(range);
    }

This seems to work in Chrome, Firefox and Safari but fails in internet explorer.

My requirement is that it works in the most recent versions of Chrome/FF and similar (a couple versions back wouldn't be a bad idea) and in IE10+.

I have tried a lot of different things but just can't seem to get it to work.

Any help is much appreciated!

Edit: For clarification, the error for me in IE is that the caret does not move when the newline is inserted, but rather the newline seems to be added after the caret which is odd behavior. But if I press enter one, then move down to that line with the arrow keys, and start pressing enter again, it works as intended. Can't tell what I'm doing wrong here.

Firas Dib
  • 2,743
  • 19
  • 38
  • could you explain your reasons for doing it? – vsync May 31 '14 at 21:07
  • 1
    http://wadmiraal.net/lore/2012/06/14/contenteditable-ie-hack-the-new-line/ – adeneo May 31 '14 at 21:08
  • http://stackoverflow.com/questions/7901350/how-to-force-br-line-break-in-firefox-contenteditable – adeneo May 31 '14 at 21:09
  • @vsync: Because its not consistent across browsers. – Firas Dib May 31 '14 at 21:11
  • @adeneo: I have tried many of those but none seem to work cross browser. – Firas Dib May 31 '14 at 21:13
  • Well, if one works in IE, and one works in other browsers, you'll probably have to combine them. – adeneo May 31 '14 at 21:16
  • I've tried your code and it doesn't seem to work, how could you know that it works in other browsers? – King King May 31 '14 at 21:18
  • @KingKing: The code seems to work for me in Chrome/Firefox/Safari. Just not in IE and I don't know how to resolve it. – Firas Dib May 31 '14 at 21:20
  • @Lindrian could you post your fiddle? here is the fiddle I've tried http://jsfiddle.net/Tym37/2/ it does not work or maybe I don't know how to know if it works. Simply typing Enter does not make it jump to the next line, also I've tried copying and pasting the typed text (with Enter typed) to Notepad and still I could not see any line-break. – King King May 31 '14 at 21:31
  • You said your code worked in Chrome, ... but I meant it seemed not to work in any browser, tested on Chrome with the fiddle I posted above, if your fiddle is different, please post it here. – King King May 31 '14 at 21:36
  • @KingKing: You need `white-space: pre-wrap` to see the newlines. See: http://jsfiddle.net/Tym37/3/ – Firas Dib May 31 '14 at 21:36
  • @Lindrian ah yes, I thought there was some special thing which `Range` object could help with showing the `\n`. Now I've just tested it, but it did not work as you said, I had to use ***2 keystrokes*** of Enter to make it jump. – King King May 31 '14 at 21:39
  • @KingKing: Well known, ignore that please. The problem at hand is that this solution does not work AT ALL as intended in Internet Explorer. The newline seems to get inserted, but the cursor does not move accordingly. – Firas Dib May 31 '14 at 21:44
  • @Lindrian not sure what the hell going your side but on my side, if you use `\n\r` instead of `\n`, then all the browsers except **IE** work expectedly (only 1 keystroke) **but** IE still requires 2 keystrokes, if you then delete something using Backspace, it will work OK. – King King May 31 '14 at 21:52
  • "Because its not consistent across browsers". so what? what is your end goal? – vsync May 31 '14 at 22:26
  • @vsync: I'm trying to create a simple WYSISYG kind of thing. – Firas Dib May 31 '14 at 22:31
  • @Lindrian - yes, editing input in a contentEditable, and then inserting it again, and saving the caret position is a nightmare...maybe you could take a look at the source code of other WYSIWYGS for directions.. – vsync Jun 01 '14 at 07:30
  • vsync: It all works wonderfully besides this. – Firas Dib Jun 01 '14 at 08:36

3 Answers3

6

Try this:

document.execCommand('insertHTML', false, '<br><br>');

Even undo\redo work :)

JBeen
  • 390
  • 4
  • 9
4

this works in IE 11 and chrome for me

if(getSelection().modify) {     /* chrome */
  var selection = window.getSelection(),
    range = selection.getRangeAt(0),
    br = document.createTextNode('\n');
  range.deleteContents();
  range.insertNode(br);
  range.setStartAfter(br);
  range.setEndAfter(br);
  range.collapse(false);
  selection.removeAllRanges();
  selection.addRange(range);       /* end chrome */
} else {
  document.createTextNode('\n');    /* internet explorer */
  var range = getSelection().getRangeAt(0);
  range.surroundContents(newline);
  range.selectNode(newline.nextSibling);   /* end Internet Explorer 11 */
}

sorry for how unorganized it is. I used getSelection().modify to determine if it was ie or not because IE doesn't have modify for some reason.

darbicus
  • 96
  • 4
-1

something like this?

if(e.which==13){
    e.preventDefault();
    $('#divID').html($('#divID').text()+"<br />");
}
writeToBhuwan
  • 3,233
  • 11
  • 39
  • 67