div模拟textarea自适应高度

Posted 2020-07-03 DTBelieve

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了div模拟textarea自适应高度相关的知识，希望对你有一定的参考价值。

　　之前在公司做项目的时候，有这么一个需求，要我写一个评论框，可以随着评论的行数增加而自动扩大，最开始我想用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的div</div>
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 规定无法编辑元素内容。

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

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

以上是关于div模拟textarea自适应高度的主要内容，如果未能解决你的问题，请参考以下文章