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

Question

我使用一个带属性的div是否会给自己带来麻烦？contentEditable="true" 作为一个文本字段，而不是一个textarea？

Answer 1

它可以很好地工作，但是会比表单更困难一些，因为你必须建立自己的逻辑，使按钮的点击事件追踪到正确的div，获取它的内容，然后进行提交。文本区域的优点是浏览器会帮你处理这些事情。

Answer 2

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

Answer 3

该 Gmail的邮件编辑框也是一个 div 与 contenteditable="true". 主要的好处是它有 自动调节 高度作为用户输入的文本内容。同时它还支持 丰富的文字 内。你可以模仿 Textarea 如果需要的话，可以设置一个最大高度。

另一方面，如果你想在这里自动设置高度，可以在 Textarea，你可能必须使用js来绑定一些监听器到 oninput 钩。