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	规定无法编辑元素内容。

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

转载于:https://www.cnblogs.com/DTBelieve/p/5351475.html

div模拟textarea自适应高度相关推荐

div模拟textarea文本域轻松实现高度自适应——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com 本文地址: http://www.zhangxinxu.com/wordpress/?p=1362 一.关于t ...
div模拟textarea文本框，输入文字高度自适应，且实现字数统计和限制
需求: 文本框可根据输入内容高度自适应,不带滚动条,高度可变的那种,我搜索了很多,发现textarea无法实现我的需求,scrollHeigh这个无法获取实际内容的高度(我用的是那种简单的,可能我写的 ...
[html] 用一个div模拟textarea的实现
[html] 用一个div模拟textarea的实现上面的代码实现了div变为可编辑状态,但是textarea标签可以在右下角自由拉伸<div class="edit" c ...
小程序中textarea自适应高度的问题
在学习小程序过程,在textarea的使用上,碰到过两个问题,这里分享一下: 一.设置style里的height属性无效解决方法: /*XXX.wxss*/ page{height: 100%; } ...
div模拟textarea在ios下不兼容的问题解决
今天发现一个好东西,赶紧记下来,我在用textarea的时候,想要自适应高度,这样就不会出现滚动条.网上找了很多,都是用div模拟的,但是好扯淡,div模拟的在ios下不能聚焦并且不能输入.真坑... ...
div模拟textarea文本域轻松实现高度自适应
2019独角兽企业重金招聘Python工程师标准>>> .app-box-content { min-width: 400px; min-height: 120px; ...
用DIV模拟TEXTAREA【QQ空间说说对话框】
<script language="javascript"> function show(){if(document.getElementById("mydi ...
vue模拟textarea自动高度
父组件 <template><div><autoHeight :text="text" @change="list">< ...
vue-textarea 自适应高度
需求简介一个搜索页面,上面输入框,下面列表展示搜索到的结果. 重点是:产品要求搜索框默认显示一行,当输入的文字超过一行时,输入框的高度会随着改变,直到输入完毕. 解决思路设想本想利用textare ...

div模拟textarea自适应高度

div模拟textarea自适应高度相关推荐

最新文章

热门文章