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 ...
随机推荐
- Go语言在线培训哪里好？Git操作和代码管理
在实际的项目开发过程中,多人进行项目开发,需要涉及到代码管理和协同管理.这就需要使用到代码协同管理工具.在过去,大家都熟悉使用的是SVN软件,而现在Git代码仓库管理软件的使用更为广泛.在本系列实战项 ...
- HTML5应用——生日快乐动画之星星
在讲述绘制星星动画之前,先介绍一点javascript知识. 面向对象: javascript本质上不是面向对象语言,而是脚本语言,一般只适合简单.代码量少的程序,因为脚本过于复杂会直接导致浏览器出现 ...
- asp.net core 自定视图主题 实现IViewLocationExpander接口
新建ThemeViewLocationExpander.cs 实现IViewLocationExpander接口 /// <summary> /// 自定视图主题 实现IViewLocat ...
- Centos7安装MySQL8.0
请到这个地址看:https://www.cnblogs.com/kevingrace/p/10482469.html Centos7安装MySQL8.0 - 操作手册 一.yum安装方式: 卸载之前版 ...
- Alpha冲刺(6/10)——2019.4.28
作业描述 课程 软件工程1916|W(福州大学) 团队名称 修!咻咻! 作业要求 项目Alpha冲刺(团队) 团队目标 切实可行的计算机协会维修预约平台 开发工具 Eclipse 团队信息 队员学号 ...
- mysql 模糊查询 concat()
concat() 函数,是用来连接字符串. 精确查询: select * from user where name=”zhangsan” 模糊查询: select * from user where ...
- vue.js 基础
vuejs 遍历 数组, vue js 文章 http://www.cnblogs.com/libin-1/p/6851775.html https://zhuanlan.zhihu.com/p/ ...
- C语言单片机中延时程序的实现
在单片机或嵌入式系统的程序,常常用规定次数的空循环来实现延时 /** * 通过一个空循环体循环让程序运行一段时间.在嵌入式系统中,这个函数用来实现延时. * * 参数: * u16 i -- 循 ...
- 利用canvas添加图片水印--直接上代码
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 09-排序3 Insertion or Heap Sort （25 分）
According to Wikipedia: Insertion sort iterates, consuming one input element each repetition, and gr ...