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并实现高度自适应的更多相关文章

  1. div模拟textarea以实现高度自适应实例页面

    作为多行文本域功能来讲,textarea满足了我们大部分的需求.然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应.textarea总是很自信地显摆它的滚动条,高度固执 ...

  2. 用一个div模拟textarea的实现

    <textarea> 标签定义一个多行的文本输入控件.但是它不能像div一样随着内容增加而自动增加,一言不合就出现滚动条,有是有为了更好的交互,可能需要使用div来模拟textarea的实 ...

  3. 一个DIV三列布局100%高度自适应的好例子（国外）

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W ...

  4. div模拟textarea文本域轻松实现高度自适应——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...

  5. div模拟textarea

    有些Weber可能没有用过contenteditable这个属性,如果想编辑一个DIV里面的内容,这个属性是一个非常不错的选择   <div contenteditable="true ...

  6. H5新增属性contenteditable（不用JS，实现div模拟textarea高度自增长）

    无意中看到一篇博客介绍了contenteditable这个属性——不需用JS,只需在div里加上contenteditable="true",即可实现div模拟textrarea( ...

  7. div模拟textarea自适应高度

    之前在公司做项目的时候,有这么一个需求,要我写一个评论框,可以随着评论的行数增加而自动扩大,最开始我想用textarea实现,但是后来尝试后发现textarea并不适合,textarea的高度不会随着 ...

  8. 使用contenteditable+div模拟textarea文本域实现高度自适应

    使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...

  9. div模拟textarea文本域轻松实现高度自适应

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 考试题 T2

    题意分析 首先 要求起点终点不连通 再结合数据范围 就是最小割了 首先我们可以建一个图出来 如果\(x\)可以到\(y\)的话 那么我们就从\(x\)向\(y\)连一条代价为\(h[x]-h[y]+1 ...

  2. OmniMarkupPreviewer 404

    Here is the answer: Sublime Text > Preferences > Package Settings > OmniMarkupPreviewer > ...

  3. 2016级算法期末模拟练习赛-C.AlvinZH的青春记忆II

    1084 AlvinZH的青春记忆II 思路 中等题,二分. 简化题意,一列数字,每秒会自动-1,特殊操作可以使一个数在1s内-k,问这些数都减至0需要多久. 答案肯定在[1,xMax]之间,采用二分 ...

  4. IntelliJ IDEA 2018.3（Ultimate Edition）激活方法

    本因博主Windos10系统上IDEA 2017会出现自带输入法候选框不跟随光标的问题,故更新了IntelliJ IDEA 2018,当时官方发布虽然还是Beta版本,但是迫于输入中文累死眼睛的窘态下 ...

  5. 【性能测试】：LR插入mysql数据库数据，脚本参数化问题

    一,今天准备脚本做mysql数据库的铺地数据,脚本内容不赘述,在批量执行insert语句时候,出现一个问题: // sprintf(chQuery, "insert into table ( ...

  6. 搜索引擎原理和SEO

    搜索引擎原理 通常是指收集了万维网上几千万到十几亿网页病对网页的每个词(即关键词)进行索引,建立搜索引擎数据库的全文搜索引擎. 当用户每次查询某个关键词的时候,所有在页面内容包含了该关键词的网页都作为 ...

  7. (7.0 version)当销售单中包含service或phantom类型的产品时,销售单不能完成的原因分析及解决方案

    首先说一下service类型的产品,由于该类型的产品不需要发货,所以当在销售订单确认了后,销售单直接变成了等待开票的状态,但当开票的流程结束后,订单却还是停在销售单的状态上,该问题的解决方案是安装Ta ...

  8. activity启动模式launchMode区别和优化

    初学android的开发人员,可能会经常忽略这个重要的设置. Activity一共有以下四种launchMode:1.standard2.singleTop3.singleTask4.singleIn ...

  9. MFRC522开发笔记

    一.了解基本概念 ①ISO-14443A协议:( 国际标准化组织:International Organization for Standardization)RFID协议的一种;   PICC:临近 ...

  10. 为apache提供sftp文件传输服务

    一.安装apache yum install httpd 二.为 /var/www/html 创建ftp账号www useradd -M -d /var/www/html www 三.更改ssh配置文 ...