如何从contenteditable span元素的开头删除enter（换行符）？

Question

我有以下代码：
在[标题]处键入一些文本，然后按Enter。
如您所见，单击h2元素中的Enter时，光标将移动到span元素。
但是，它在开头添加了额外的一行。
我不知道如何从末尾删除一行。

 function enter() { if (event.key == "Enter") { $("div#text span").focus(); } } var h = $('h2').offset(); $('div#text span').click(function() { }); 

 div#text { padding: 5px; margin: 0; width: 99.3%; height: 99%; resize: none; font-family: 'Callibri'; font-size: 25px; text-align: left; z-index: 99; line-height: 30px; background-color: white; overflow-y: scroll; cursor: text; } h2 { text-align: center; font-size: 40px !important; } h2:focus, div#text span:focus { outline: none; border: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="text" spellcheck="false"> <h2 contenteditable="true" onkeydown="enter()">[Header]</h2><span contenteditable="true">[Body]</span> </div> 

Answer 1

使用event.preventDefault覆盖按Enter键时的默认行为。

 function enter() { if (event.key == "Enter") { event.preventDefault(); $("div#text span").focus(); } } var h = $('h2').offset(); $('div#text span').click(function() { }); 

 div#text { padding: 5px; margin: 0; width: 99.3%; height: 99%; resize: none; font-family: 'Callibri'; font-size: 25px; text-align: left; z-index: 99; line-height: 30px; background-color: white; overflow-y: scroll; cursor: text; } h2 { text-align: center; font-size: 40px !important; } h2:focus, div#text span:focus { outline: none; border: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="text" spellcheck="false"> <h2 contenteditable="true" onkeydown="enter()">[Header]</h2><span contenteditable="true">[Body]</span> </div>