用一个div模拟textarea的实现
<textarea> 标签定义一个多行的文本输入控件。但是它不能像div一样随着内容增加而自动增加,一言不合就出现滚动条,有是有为了更好的交互,可能需要使用div来模拟textarea的实现,直奔主题吧。
1、内容可编辑 contenteditable
对就是contenteditable,给div添加contenteditable=true即可;
2、demo
//css
div{
width: 400px;
min-height: 100px;
max-height: 300px;
_height: 100px; //IE6
margin-left: auto;
margin-right: auto;
padding: 3px;
outline: 0;
border: 1px solid #a0b3d6;
font-size: 12px;
word-wrap: break-word;
overflow-x: hidden;
overflow-y: auto; //超过最大高度就出现滚动条
_overflow-y: visible;
} //html
<div contenteditable="true">
.....此处省略.....
</div>
用一个div模拟textarea的实现的更多相关文章
- 用一个div模拟textarea并实现高度自适应
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
- div模拟textarea以实现高度自适应实例页面
作为多行文本域功能来讲,textarea满足了我们大部分的需求.然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应.textarea总是很自信地显摆它的滚动条,高度固执 ...
- H5新增属性contenteditable(不用JS,实现div模拟textarea高度自增长)
无意中看到一篇博客介绍了contenteditable这个属性——不需用JS,只需在div里加上contenteditable="true",即可实现div模拟textrarea( ...
- div模拟textarea文本域轻松实现高度自适应——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...
- div模拟textarea自适应高度
之前在公司做项目的时候,有这么一个需求,要我写一个评论框,可以随着评论的行数增加而自动扩大,最开始我想用textarea实现,但是后来尝试后发现textarea并不适合,textarea的高度不会随着 ...
- 使用contenteditable+div模拟textarea文本域实现高度自适应
使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...
- div模拟textarea文本域轻松实现高度自适应
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- div模拟textarea实现高度自增长
今天突然有位前端的朋友问我textarea怎么实现高度随内容自增长,我一下子懵了,首先想到的是用js改变textarea的高度,但是百度了很多参考代码效果都不是很理想. 因为之前实际项目中用的text ...
- div模拟textarea
有些Weber可能没有用过contenteditable这个属性,如果想编辑一个DIV里面的内容,这个属性是一个非常不错的选择 <div contenteditable="true ...
随机推荐
- 用javascript做别踩白块游戏2
这一次做一个好一点的,要求黑块自动下落,且速度逐渐加快 <!DOCTYPE html> <html> <head> <!-- 禁用缩放功能 --> &l ...
- Apollo单向SSL认证(2)
一.生成ks和ts 二.连接测试 1.配置 2.测试
- SpringCloud的Hystrix(二) 某消费者应用(如:ui、网关)访问的多个微服务的断路监控
一.验证断路保护监控是否管理多个消费者 app 1.第1个消费者应用:访问自己封装rest服务 saleProd 2.第2个消费者应用:第二个应用没有反应 说明 1.每个应用实例的断路保护机制,只对本 ...
- 2018年Web前端自学路线
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. Web前端入门的自学路线 新手入门前端,需要学习的基础内容有很多,如下. ...
- 启动mongodb遇到的错:warning: 32-bit servers don't have journaling enabled by deflity
执行修复:mongod --repair即可 正常关闭:killall mongod
- linux搭建django项目基本步骤
一 linux下django基本项目搭建流程:M model 用于与数据库交互V view 接受前台请求 调用model获取结果,调用T获取页面,返回给前台T template 接受view的要求 生 ...
- iOS HTML图片本地预览
引言 相信用过苹果手机的童鞋,会发现很多新闻类的应用,都可以实现HTML图片本地预览,那么这是如何实现的呢?本文将深入阐述其中的原理. 关于此功能,我还实现了一个DEMO,大家可以点击此访问更详细内容 ...
- Django:(博客系统)添加文章(中文)出现UnicodeEncodeError乱码
添加文章时出现了一个UnicodeEncodeError乱码问题 在添加文章时,抛出了异常: 解决方案,修改manage.py(添加import sys reload(sys) sys.setdefa ...
- logback生成多个不同的日志文件
用logback生成日志文件做日志分析,日志写到多个文件中 http://stackoverflow.com/questions/2488558/logback-to-log-different-me ...
- window下编辑了脚本文件linux报如下错误
首先vi :set ff 查看文件类型 接着 下载dos2unix root用户下yum -y install dos2unix 然后 dos2unix 文件.sh 转换格式 接着在正常启动即可