使用纯 javascript 而非 jQuery 防止 contenteditable 在输入时添加 div

Question

prevent contenteditable adding div on enter using pure javascript NOT jQuery

like this example http://jsfiddle.net/uff3M/

but I need it in javascript not jQuery

I solved my problem Thanks all

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

 div{ border:1px black solid; padding:10px; }

 <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>

Answer 1

Looks like all you still need to do, is properly prevent the event's default action - return false alone does not do that in this situation.

You either need to pass this return value up the chain inside the HTML attribute used to add the handler function,

onkeydown="return enterToBr()"

or you prevent it using the appropriate method,

    if(keyCode==13){
            document.execCommand('insertHTML', false, '<br>');
            evt.preventDefault();
    }

Answer 2

You can do that will CSS too.

Add display: inline-block; to your div:

div{
    display: inline-block;
}

Answer 3

 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>