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; }});
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;}