Javascript 使用contentEditable div而不是textarea的缺点是什么？

如果使用属性为

contentEditable=“true”

的div作为文本字段而不是文本区域，我会不会伤到自己的脚

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

这不是一回事。首先，在语义上，textarea的用途是编写/编辑纯文本，而使用contentEditable，您可以编辑列表（例如，请参见：）

---

第二，行为也不同。例如，在chrome中，当您测试下面的链接并删除所有内容时，您会失去焦点（div元素消失），这不是预期的行为，或者如果它是傻瓜。

Gmail的邮件编辑框也是一个

div

，带有

contenteditable=“true”

。主要的好处是，它可以在用户输入文本/内容时自动调整高度。它还支持内部的富文本。如果需要，您可以通过设置最大高度来模拟

Textarea

---

另一方面，如果你想在

Textarea

中实现自动高度，你可能需要使用js将一些监听器绑定到

oninput

钩子上。

如果你想要一个文本字段，就使用Textarea，这样就不太可能把事情搞砸。仅在需要设置文本格式时使用contentEditable div。它不适用于表单。