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

Question

我有以下代码：
在[Header]处键入一些文本，然后按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>