HTML Contenteditable only on line

Question

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

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

代码：

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();

HTML Contenteditable only on line

HTML Contenteditable only on one line

html

javascript

css

markup

webpage