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

Question

On Internet Explorer, a contentEditable DIV creates a new paragraph (

) each time you press Enter whereas Firefox creates a
<

Answer 1

IE binds the text node with a

tag on Enter key press. To achieve a line break Shift+Enter. Firefox adds a
tag on Enter key press. To make the behavior common across both the browsers, you can do the following:

Assume the following markup:

Javascript [assume the below code is in a function closure so that you don't bloat the page with globals]:

 (function () {
     //Initialize _shiftKeyPressed to false
     var _shiftKeyPressed = false;
     $('#editableDiv').live('keydown', function (e) {
         if (e.keyCode == 16) {
             // SHIFT key is pressed
             _shiftKeyPressed = true;
         }
     }).live('keyup', function (e) {
         if (e.keyCode == 16) {
             // SHIFT key is release
             _shiftKeyPressed = false;
         }
     }).live('keypress', function (e) {
         if (e.keyCode == 13 && !_shiftKeyPressed && !jQuery.browser.msie) {
             // Insert a PARAGRAPH in Firefox instead of a BR
             // Ignores SHIFT + ENTER
             document.execCommand("insertParagraph", false, true);
         }
     })
 })();

Note: this script is prior to jQuery < 1.9 for the use of the deprecated $.browser