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 ...
随机推荐
- HDU6315 Naive Operations（多校第二场1007）（线段树）
Naive Operations Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 502768/502768 K (Java/Other ...
- 勤哲excel服务器开发外贸行业薪资考核系统
以外销为驱动的订单行业,外贸业务员的素质直接决定公司效益.然而,大多数外贸公司或以外贸为主的工厂,经常面临外贸业务人员流动性频繁的问题,易 导致客户流失及跟单的困难.科学合理的与业绩挂钩的薪资考核,可 ...
- <aop:aspectj-autoproxy proxy-target-class="false"/>导致出现404状态码
今天干活的时候,由于是一个web应用,想在每次发送请求和返回响应的时候记录日志,也就是代理Controller,想起了之前的spring AOP,于是按照之前的配置配置好了,可是发现每次前端发送请求都 ...
- c语言定义指针类型需注意事项
1)在定义说明语句中,指针变量名之前的星号“*“是指针变量的修饰符,也就是说它所修饰的变量是指针变量. 2)指针变量是用它们所指向的对象类型来区分的.如定义 int *ip,类型int并不是指针的类型 ...
- 2-28 if...else
- Mysql-proxy代理内网数据库
Mysql-proxy 参考:https://segmentfault.com/q/1010000000394160 情景分析:首先您需要正在使用UCloud云主机(uhoust)以及云数据库(udb ...
- Request库基本使用
基本实例 import requests url= 'https://www.baidu.com/' response = requests.get(url) print(type(response) ...
- EF上下文容器，保存线程唯一性
在工作中有个疑问,就是EF上下文容器到底创建了多少个? 在asp.net中,EF上下文容器.如果只要有一个,则每次一个用户访问,添加一些实体,然后又不会自动销毁,就会造成内存爆炸.如果每次创建一个,则 ...
- mysqldump的用法
1.mysqldump 是文本备份还是二进制备份 它是文本备份,如果你打开备份文件你将看到所有的语句,可以用于重新创建表和对象.它也有 insert 语句来使用数据构成表. mysqldump可产生两 ...
- Java学习笔记day04_数组
1.switch case switch语句中表达式的数据类型是有要求的: JDK 1.0 ~ 1.4 , 数据类型接受byte, short, int, char JDK 1.5 , 数据类型接受b ...