H5新增属性contenteditable（不用JS，实现div模拟textarea高度自增长）

无意中看到一篇博客介绍了contenteditable这个属性——不需用JS，只需在div里加上contenteditable="true"，即可实现div模拟textrarea（文本域），让textrarea的高度随内容的增加而自动增加。当时就惊呆了，居然还有这种操作！！！

<div id="textarea" contenteditable="true"></div>

原文博客

contenteditable属性介绍：http://www.w3school.com.cn/html5/att_global_contenteditable.asp

下面是一个小demo，加了一些样式修饰，然后把文本域也加上了，方便对比。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style>
        #textarea {
            width: 300px;
            border: 1px solid #ccc;
            min-height: 200px;
            max-height: 600px;
            overflow: auto;
            font-size: 14px;
            outline: none;
            margin-bottom: 20px;
            -webkit-user-modify: read-write-plaintext-only;
            /*可以让元素既可以编辑，又只能输入纯文本，并且不会有富文本，但目前只有谷歌支持，建议移动端用*/
        }
    </style>

    <body>
        <div id="textarea" contenteditable="true">王尼玛</div>
        
        <textarea name="" rows="10" cols="50">大头死变态</textarea>
        
    </body>

</html>

注：上面demo中，有一句代码 -webkit-user-modify: read-write-plaintext-only; 可能小伙伴们看着有点蒙。

　　加这句代码是因为用contenteditable属性实现div模拟textarea高度自增长以后，可以复制富文本到文本域里，这句代码就是为了不让复制富文本，只能输入纯文本

　　什么是富文本：https://zhidao.baidu.com/question/345297157.html

-webkit-user-modify: read-write-plaintext-only属性详解