div模拟textarea自适应高度

　　之前在公司做项目的时候，有这么一个需求，要我写一个评论框，可以随着评论的行数增加而自动扩大，最开始我想用textarea实现，但是后来尝试后发现textarea并不适合，textarea的高度不会随着输入行数的增多而增大，于是我上网寻求了下帮助，发现大神张鑫旭的这篇文章《div模拟textarea文本域轻松实现高度自适应》,成功解决我的问题

代码如下：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>div模拟textarea自适应高度le>
  6     <style type="text/css">
  7         .test_box{
  8             width:500px;
  9             min-height:200px;
 10             max-height:600px;
 11             _height:200px;/*兼容IE6浏览器*/
 12             margin:0 auto;
 13             padding:3px;
 14             outline:0;
 15             border:1px solid #e4e4e4;
 16             font-size:12px;
 17             word-wrap:break-word;/*用于英文文本自动换行，所有主流浏览器支持*/
 18             overflow-x:hidden;
 19             overflow-y:auto;
 20             -webkit-user-modify: read-write-plaintext-only;
 21         }
 22     </style>
 23 </head>
 24 <body>
 25     <div class="test_box" contenteditable="true">我是模拟textarea的div</div>
 26     <script type="text/javascript">
 27         if (typeof document.webkitHidden == "undefined") {
 28             // 非chrome浏览器阻止粘贴
 29             box.onpaste = function() {
 30                 return false;
 31             }
 32         }
 33     </script>
 34 </body>
 35 </html>

其中有一两个从没见过的属性：

• -webkit-user-modify: read-only | read-write | read-write-plaintext-only

  read-only	内容只读。
  read-write	内容可读写。
  read-write-plaintext-only	内容可读写，但粘贴内容中的富文本格式（如文本的颜色、大小，图片等）会丢失。内容类似于以纯文本显示。

• contenteditable 属性规定是否可编辑元素的内容。
  

  true	规定可以编辑元素内容。
  false	规定无法编辑元素内容。

　　

　　再次感谢鑫大神（http://www.zhangxinxu.com/），分享了好多非常实用的经验，等将来能达到他那种高度，我也想写出好博客分享出来造福人类，哈哈，虽然还很遥远，继续fighting~