HTML Contenteditable 仅在一行上

Question

我有一个应用程序，其中包含用户可以创建的不同列表，并且用户可以编辑名称，但是如果他输入新名称，他应该能够输入 Enter 并向下移动多行。

我想让可编辑区域只有一行。我添加了最大高度并隐藏了溢出，但这实际上只隐藏了您键入的其他内容，并且我只希望保留一行。

代码：

h3 {
  height: 25px;
  max-height: 25px;
  overflow: hidden;
}

<h3 contenteditable="true">To Do List</h3>
<section id="pageOne" contenteditable="true">
    <li style="color: #393939;"></li>
</section>

图片：

Answer 1

正如@TarasDanylyuk 所说，您可以keydown结合使用preventDefault()来实现这一点。

这是一个工作示例：

document.getElementById('pageOne').addEventListener('keydown', function(e) {
  if (e.keyCode == 13) {    // if Enter has been pressed
    e.preventDefault();
  }
});

h3 {
  height: 25px;
  max-height: 25px;
  overflow: hidden;
}

<h3 contenteditable="true">To Do List</h3>
<section id="pageOne" contenteditable="true">
  <li style="color: #393939;"></li>
</section>

如果要在Enter按下时移除焦点，可以通过在preventDefault()调用后添加以下行来实现：

e.target.blur();