Prevent contenteditable adding <div> on ENTER - Chrome Prevent contenteditable adding <div> on ENTER - Chrome google-chrome google-chrome

Prevent contenteditable adding <div> on ENTER - Chrome


Try this:

$('div[contenteditable]').keydown(function(e) {    // trap the return key being pressed    if (e.keyCode === 13) {        // insert 2 br tags (if only one br tag is inserted the cursor won't go to the next line)        document.execCommand('insertHTML', false, '<br/>');        // prevent the default behaviour of return key pressed        return false;    }});

Click here for demo


Add style display:inline-block; to contenteditable, it will not generate div, p and span automatically in Chrome.


You can do this with just a CSS change:

div{    background: skyblue;    padding:10px;    display: inline-block;}pre{    white-space: pre-wrap;    background: #EEE;}

http://jsfiddle.net/ayiem999/HW43Q/