textarea使我们常常使用的一种表单形式，多用于大段文字的输入，大多数情况下，textarea都是可以满足需求的，但是当我们希望这个输入框高度自适应的时候，textarea就很难做到了。 ok，主角登场，html5中的 contenteditable 可以做到。
文档： http://www.w3school.com.cn/tags/att_global_contenteditable.asp
即这个属性是直接添加在标签中的，属性值为true则为可编辑，属性值为false则为不可编辑。
下面的这段代码即可实现：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>contenteditable</title> <style> div.foo { 400px; min-height: 30px; max-height: 200px; outline: none; overflow-y: auto; border: thin solid red; padding: 0 5px; } </style> </head> <body> <div contenteditable="true" class="foo"></div> </body> </html>
即创建的这个div的宽度是固定的，高度最小值为30px，最大值为200px，outline设置为none，当高度超出时出现滚动条， 给一个红色的border，添加padding美化效果，最终展示如下：
可以看到， 这里当我们回车时就会创建一个新的div，并且在某些情况下会创建一个<br>标签。
那么我们可以通过使用正则表达式来去除之：
document.querySelector('.foo').innerHTML.replace(/<div>|</div>|<br>| /g, "");
这样得到的结果就是： "第一：这时非常好的一件事情。第二：不错。第三：JS一统天下。"
于是，我们就可以以此来提交表单了。
但是，事情并没有这么简单，因为，通过尝试发现，这里不仅可以使用文本，还可以填充富文本，如下：
这时再用正则来处理就有问题了。
其实 contenteditable 提供的不仅仅是true和false，还可以使用 plaintext-only 作为值，如下：
<div contenteditable="plaintext-only" class="foo"></div>
这样就既不用使用正则，也不需要担心富文本的输入了。
更多可以参考这篇文章：http://www.zhangxinxu.com/wordpress/2016/01/contenteditable-plaintext-only/