contenteditable 属性允许用户在一个可编辑区域内输入文本。在前端开发中，我们经常使用此属性来实现一些交互功能，比如评论、富文本编辑器等。
使用方式
将 contenteditable 属性设置为 true 即可将元素变为可编辑状态：
<div contenteditable="true">可编辑的文本</div>
当然，也可以通过 JavaScript 方式来启用和禁用编辑模式：
// 启用编辑模式
document.querySelector('div').contentEditable = true;
// 禁用编辑模式
document.querySelector('div').contentEditable = false;单行输入的问题
默认情况下，设置 contenteditable 的元素是支持多行输入的。但有时我们只想要单行输入的效果。这里介绍两种实现方式。
1. 设置样式 white-space: nowrap
将容器元素（即具有 contenteditable 属性的元素）的 white-space 样式设置为 nowrap，可以使文本强制在一行内换行，从而达到单行输入的目的。
<div contenteditable="true" style="white-space: nowrap;">单行输入</div>
2. 监听按键事件
另一种方式是通过 JavaScript 监听按键事件，当按下回车键时阻止默认行为，从而实现只能输入一行的效果。
-- -------------------- ---- -------
---- ---------------------- -----------------
--------
----- ----- - ---------------------------------
--------------------------------- ------- -- -
-- ---------- --- -------- -
-----------------------
-
---
---------学习和指导意义
通过本文的介绍，我们了解到了 contenteditable 属性的使用方法，以及如何实现单行输入。在实际开发中，如果我们需要实现类似评论、留言等功能时，可以采用 contenteditable 来实现，从而提高用户体验。
同时，contenteditable 属性也存在一些兼容性问题，比如 IE 浏览器的表现与其他浏览器不同，需要注意。在使用过程中，我们需要根据实际需求做出权衡，并注意一些兼容性问题，从而更好地运用该属性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24832