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 ...
随机推荐
- C#引号中用@报错
如SQL = " INSERT INTO A SELECT * FROM B@DBLINK "会报“Parameter '@DBLINK' specified but none o ...
- 区块链中的密码学（四）- Merkle树和SPV节点
什么是Merkle Tree? Merkle Tree 的命名来自于美国密码学家Ralph C. Merkle ,关于他的个人资料:传送门https://en.wikipedia.org/wiki/R ...
- sap abap 流水号设置
1.TCODE:SNRO,进入如图所示界面 2. 短文本和长文本用来说明这个编号范围对象,输入任意描述即可. 子对象数据元素我们这里不填.这里需要说明一下,所谓子对象,多数指一个组织结构,比如公司代码 ...
- 平衡树学习笔记（2）-------Treap
Treap 上一篇:平衡树学习笔记(1)-------简介 Treap是一个玄学的平衡树 为什么说它玄学呢? 还记得上一节说过每个平衡树都有自己的平衡方式吗? 没错,它平衡的方式是......rand ...
- P2115 [USACO14MAR]破坏Sabotage
题意:给你一个正整数序列,让你删去一段区间内的数[l,r] $1<l\le r <n$ 使得剩余的数平均值最小$n\le 10^5$ 1.不难想到暴力,用前缀和优化$O(n^2)$ #in ...
- kuangbin专题十六 KMP&&扩展KMP HDU1358 Period
For each prefix of a given string S with N characters (each character has an ASCII code between 97 a ...
- PHP中SESSION无法获取问题
近期在看公司老项目,前台可以正常访问,但是后台却无法登录,一直报请求超时,请重新登录!进入服务后发现是有一处SESSION的值无法获取,这就让人很郁闷了,通常SESSION无法使用都是因为没有使用se ...
- 洛谷 P1801 黑匣子_NOI导刊2010提高（06）
题目描述 Black Box是一种原始的数据库.它可以储存一个整数数组,还有一个特别的变量i.最开始的时候Black Box是空的．而i等于0.这个Black Box要处理一串命令. 命令只有两种: ...
- Educational Codeforces Round 13 B
Description The girl Taylor has a beautiful calendar for the year y. In the calendar all days are gi ...
- 封装OkHttp，通过改造Callback接口实现
1:实现Callback回调接口import android.os.Handler;import android.os.Looper;import android.os.Message; import ...