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 ...
随机推荐
- python的发音
我一直读的是:拍方(可能是受有道词典发音的影响了~),可是别人都听不懂,他们大多是读的拍森. 来看看下面这个小伙伴的解释,感觉他说的挺好: “θ”这个字符的发音,有 80% 的中国人(学英文的人)都读 ...
- JavaScript学习笔记——1.了解JavaScript
百度百科: JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScript脚本是通过嵌入在HT ...
- C语言数据结构-循环队列的实现-初始化、销毁、清空、长度、队列头元素、插入、删除、显示操作
1.数据结构-循环队列的实现-C语言 #define MAXSIZE 100 //循环队列的存储结构 typedef struct { int* base; //基地址 int _front; //头 ...
- java中list里面存放map，根据map中的某一个字段进行排序
package com; import java.util.ArrayList; import java.util.Collections; import java.util.Comparator; ...
- 老男孩python作业3-购物车程序优化
购物车优化要求:用户入口: 1.商品信息存在文件里 2.已购商品,余额记录.第一次启动程序时需要记录工资,第二次启动程序时谈出上次余额 3.允许用户根据商品编号购买商品 4.用户选择商品后,检测是否够 ...
- freemarker 定义公共header
<#--公共顶部--> <#macro header title="默认文字" keywords="默认文字" description=&qu ...
- 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_基元类型（二）
[基元类型推荐] 推荐直接使用 FCL 类型. [理由] 编码时不至于困惑string与String的使用.由于C#的stirng(一个关键字)直接映射到System.String(一个 FCL 类型 ...
- unittest框架
在我们真正的编写测试用例之前,我们需要了解一下测试框架. unittest是python自带的单元测试框架,尽管其主要是为单元测试服务的,但我们也可以用它来做接口的自动化测试. unittest框架为 ...
- Linux网络编程基础
1. Linux网络模型 ① OSI七层模型和Linux四层模型 ② 各种协议之间的关系及在Linux模型中的位置 ③ 协议封装:各种协议处于一种层层封装的关系 (1)Ethernet (2)IP * ...
- spring bean name生成规则
现象: PVService PVServiceImpl ===>名称就是PVServiceImpl, 首字母没有小写 PageViewServiceImpl ==>名称是pageViewS ...