Make a <Br> Instead of <Div></Div> by Pressing Enter on a Contenteditable

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

prevent contenteditable adding div on enter using pure javascript NOT jQuery

function enterToBr(e){    var evt = e || window.event;    var keyCode = evt.charCode || evt.keyCode;    if(keyCode==13){            document.execCommand('insertHTML', false, '<br>');    }}

div{    border:1px black solid;    padding:10px;display: inline-block;}

<div contenteditable="true" id="container" onkeydown="enterToBr()">When Enter it's create new div inside container , but I need when user press enter key create new br not new div</div>

Replace paragraph by br / tag in div with contenteditable

How about trapping the user keyboard event of pressing the Enter key?

---

Related Topics