div模拟textarea自适应高度 - DTBelieve

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

代码如下：

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