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

Question

我是否会通过使用属性为contentEditable="true"的div作为文本字段而不是文本区来拍摄自己？

Answer 1

它可以正常工作，但它比表单更难一点，因为你将不得不连接自己的逻辑，使按钮的点击事件跟踪正确的div，得到它内容，然后执行提交。 textarea的优势在于浏览器会为您完成所有这些工作。

Answer 2

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

Answer 3

Gmail的邮件编辑框也是带有div的{​​{1}}。主要优点是它具有自动调整高度作为用户输入的文本/内容。它还支持内部的富文本。您可以根据需要通过设置最大高度来模仿contenteditable="true"。

另一方面，如果要在Textarea中设置自动高度，则可能必须使用js将某些侦听器绑定到Textarea钩子上。

Answer 4

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