使用 contentEditable div 而不是 textarea 有什么缺点？答案

【问题标题】：What are the cons of using a contentEditable div rather than a textarea?使用 contentEditable div 而不是 textarea 有什么缺点？
【发布时间】：2011-07-14 03:23:12
【问题描述】：

如果使用属性为contentEditable="true" 的div 作为文本字段而不是文本区域，我会不会自责？

【问题讨论】：

如果您想要一个 text 字段，请使用 textarea，它不太可能搞砸。仅当您需要格式化文本时才使用 contentEditable div。
它不适用于表单。

标签： javascript html css contenteditable

【解决方案1】：

它可以正常工作，但它会比表单更难一些，因为您必须连接自己的逻辑以使按钮的点击事件跟踪正确的 div，获取它的内容，然后执行提交。 textarea 的优点是浏览器会为您处理所有这些。

【讨论】：

【解决方案2】：

这不是一回事。首先从语义上讲，textarea 的目的是编写/编辑纯文本，而使用 contentEditable 您可以编辑列表，例如（参见：htmldemo）其次，行为也不同。例如，在 chrome 中，当您测试下面的链接并删除所有内容时，您会失去焦点（div 元素消失），这不是预期的行为，或者如果它是白痴。

【讨论】：

【解决方案3】：

Gmail 的邮件编辑框也是div 和contenteditable="true"。主要好处是它具有自动调整高度作为用户输入的文本/内容。它还支持富文本。如果需要，您可以通过设置最大高度来模仿Textarea。

另一方面，如果您希望Textarea 中的自动高度，您可能必须使用 js 将一些侦听器绑定到 oninput 挂钩。

【讨论】：

【解决方案4】：

在 divs 和 contenteditable="true" 中，内容可以是 html 格式，例如不同颜色的文本。另见https://stackoverflow.com/a/40898337/11769765。

【讨论】：