logo标签列表

使用contentEditable div相比于textarea有哪些缺点？

javascripthtmlcsscontenteditable
67

如果我使用带有属性 contentEditable =“true” 的 div 代替 textarea 作为文本字段，是否会自讨苦吃？

如果你想要一个“文本”字段，使用文本区域（textarea），这样不太可能搞砸事情。只有在需要格式化文本的能力时才使用contentEditable div。 - Anomie
2
它无法与表单一起使用。 - Felix Kling
4个回答
27

它会很好地工作，但与表单相比，它会稍微困难一些，因为您将不得不连接自己的逻辑来使按钮的点击事件追踪正确的div，获取其内容，然后执行提交。文本框的优点是浏览器会为您处理所有这些。

11

Gmail的邮件编辑框也是一个带有contenteditable="true"属性的div。它最大的好处是随着用户输入文本/内容自动调整高度。此外，它还支持内部的富文本。如果需要，您可以设置最大高度来模仿Textarea。

另一方面，如果你想要Textarea的自动高度，你可能需要使用js将一些监听器绑定到oninput钩子上。

6

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

2
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接