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~
div模拟textarea自适应高度的更多相关文章
- div模拟textarea实现高度自增长
今天突然有位前端的朋友问我textarea怎么实现高度随内容自增长,我一下子懵了,首先想到的是用js改变textarea的高度,但是百度了很多参考代码效果都不是很理想. 因为之前实际项目中用的text ...
- div模拟textarea且高度自适应
需求 我们知道文本超出 textarea 高度后,textarea 就会出现滚动条,需求就是让 textarea 高度跟随文本高度变化,屏蔽滚动条,原来做过用js去监听文本行数,然后改变文本框的高度, ...
- div模拟textarea以实现高度自适应实例页面
作为多行文本域功能来讲,textarea满足了我们大部分的需求.然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应.textarea总是很自信地显摆它的滚动条,高度固执 ...
- div模拟textarea文本域轻松实现高度自适应
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- div模拟textarea文本域轻松实现高度自适应——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...
- 使用contenteditable+div模拟textarea文本域实现高度自适应
使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...
- textarea自适应高度，div模仿textarea可编辑实现自适应高度，placeholder使用图标
1.textarea自适应高度,placeholder使用图标 自适应高度,有很多种办法: 1)jq: $("textarea").on("input",fun ...
- H5新增属性contenteditable（不用JS，实现div模拟textarea高度自增长）
无意中看到一篇博客介绍了contenteditable这个属性——不需用JS,只需在div里加上contenteditable="true",即可实现div模拟textrarea( ...
- textarea自适应高度
最近做项目遇见了这个自适应高度的问题,也在网上找了些资料,大多选择用DIV模拟textarea,但是这样就有安全性的问题,因为你是可以直接将HTML代码输入进去的. 接下来介绍的这种办法是采用两个te ...
随机推荐
- 【规律】Gym 100739L Many recursions
给出a,求递归式g(k)的初始条件g(0); 可以看出来g(a) = 1,从后往前推.写个模拟程序可以看出来其实g(0) = 2^a,那么就是一个简单地快速幂取模问题了. #include <c ...
- （Python OpenGL）【3】着色器 PyOpenGL
(Python OpenGL)现在开始我们使用着色器来进行渲染.着色器是目前做3D图形最流行的方式. OpenGL的渲染管线流程: 数据传输到OpenGL—>顶点处理器—>细分着色—> ...
- Ubuntu安装SHH服务
1.打开"终端窗口",输入"sudo apt-get update"-->回车-->"输入当前登录用户的管理员密码"--> ...
- Python: 安装 sklearn 包出现错误的解决方法
今天在安装 Python 的 sklearn 包时出现了 Cannot uninstall 'numpy' 和 Cannot uninstall 'scipy' 错误,下面记录了我尝试了很多网上的方法 ...
- The requested profile "account" could not be activated because it does not exist 无法maven install的 解决办法，勾选红框选择的选项即可
- MVC部分视图的使用
用户访问的视图:Index.cshtml @{ ViewBag.Title = "Home Page"; } <div class="jumbotron" ...
- H - 逆序数（树状数组）
在一个排列中,如果一对数的前后位置与大小顺序相反,即前面的数大于后面的数,那么它们就称为一个逆序.一个排列中逆序的总数就称为这个排列的逆序数. 如2 4 3 1中,2 1,4 3,4 1,3 1是逆序 ...
- hdu6441 Find Integer 求勾股数 费马大定理
题目传送门 题目大意: 给出a和n,求满足的b和c. 思路: 数论题目,没什么好说的. 根据费马大定理,当n>2时不存在正整数解. 当n=0或者1时特判一下就可以了,也就是此时变成了一个求勾股数 ...
- mariaDB 远程连接不上
GRANT ALL PRIVILEGES ON *.* TO 'user'@'%' IDENTIFIED BY 'password' WITH GRANT OPTION; // %:表示从任何主机连接 ...
- LeeCode（No3 - Longest Substring Without Repeating Characters）
题目: Given a string, find the length of the longest substring without repeating characters. 示例: Given ...