用一个div模拟textarea并实现高度自适应
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 .textarea{
8 width: 300px;
9 border:1px solid #ccc;
10 min-height:200px;
11 max-height:300px;
12 overflow: auto;
13 outline:0;
14 }
15 </style>
16 </head>
17 <body>
18 <div class="textarea" contenteditable="true">textarea</div>
19 </body>
20 </html>
现代浏览器如Firefox在可编辑模式下的div获取焦点的时候会有虚框，而实际上textarea是没有虚框显示的，此迹象会暴露出div是个冒牌货，所以，需要添加下面的样式：outline:0;
另外div+contenteditable的方式虽然可以识别超链接，但是不能点击打开，针对这个问题创建一个iframe内联框架即可解决
本文参考自
http://www.zhangxinxu.com/wordpress/2010/12/div-textarea-height-auto/comment-page-1/#comment-360593
http://www.cnblogs.com/luozhihao/p/4745365.html
用一个div模拟textarea并实现高度自适应的更多相关文章
- div模拟textarea以实现高度自适应实例页面
作为多行文本域功能来讲,textarea满足了我们大部分的需求.然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应.textarea总是很自信地显摆它的滚动条,高度固执 ...
- 用一个div模拟textarea的实现
<textarea> 标签定义一个多行的文本输入控件.但是它不能像div一样随着内容增加而自动增加,一言不合就出现滚动条,有是有为了更好的交互,可能需要使用div来模拟textarea的实 ...
- 一个DIV三列布局100%高度自适应的好例子（国外）
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W ...
- div模拟textarea文本域轻松实现高度自适应——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...
- div模拟textarea
有些Weber可能没有用过contenteditable这个属性,如果想编辑一个DIV里面的内容,这个属性是一个非常不错的选择 <div contenteditable="true ...
- H5新增属性contenteditable（不用JS，实现div模拟textarea高度自增长）
无意中看到一篇博客介绍了contenteditable这个属性——不需用JS,只需在div里加上contenteditable="true",即可实现div模拟textrarea( ...
- 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 ...
随机推荐
- JS设计模式之单体模式（Singleton）
单体模式作为一种软件开发模式在众多面向对象语言中得到了广泛的使用,在javascript中,单体模式也是使用非常广泛的,但是由于javascript语言拥有其独特的面向对象方式,导致其和一些传统面向对 ...
- 【性能测试】：oracle数据库的监控方式
一,[前提]:登陆操作系统后,需要切换到SQLPLUS的命令行模式:sqlplus / as sysdba 二,[监控步骤]:开始时执行一次:SQL>exec DBMS_WORKLOAD_REP ...
- JDBC处理可滚动的处理集
Statement createStatement(int resultSetType, int resultSetConcurrency, ...
- pycharm使用github
pycharm使用github 绑定账号 File-settings 在搜索框输入git 会出现github,然后在旁边输入你github的用户名和密码,可以点击”test”测试一下,如果出现: Co ...
- PHP之string之ltrim()函数使用
ltrim (PHP 4, PHP 5, PHP 7) ltrim - Strip whitespace (or other characters) from the beginning of a s ...
- lazy初始化和线程安全的单例模式
1.双检锁/双重校验锁(DCL,即 double-checked locking) JDK 版本:JDK1.5 起 是否 Lazy 初始化:是 是否多线程安全:是 实现难度:较复杂 描述:这种方式采用 ...
- centos下对文件某些特定字符串分组统计出现次数
假如现有数据: { "@timestamp": "2018-10-13T21:55:58+08:00", "remote_addr": &q ...
- laravel5.4学习--laravel安装
1.使用Laravel HomeStead可以直接作为laravel的环境,如果没有使用Homestead,就必须保证开发环境满足以下要求 PHP版本 >= 5.6.4PHP扩展:OpenSSL ...
- audio标签的自动播放(ios)
0.应用场景 前端移动端开发,经常有播放音乐的需求.比如我有公司做过类似支付宝的年度账单,功能是用户在查看年度账单的过程中播放轻音乐. 1.audio标签播放mp3 (一)常用属性和API介绍 1.c ...
- VS中自定义C#快速简写代码
首先在VS中找到工具——代码片段管理器——语言选择(CSharp)——Visual C#——赋值路径——根据路径找到对应的代码片段用VS打开 修改: Title——标题 ShortCut——缩写 D ...