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. 河内塔问题（C++版）

    上次,我们讲了汉诺塔,今天我们来讲一讲和汉诺塔类似的题目<河内塔问题> 题目描述 Description 一位法国数学家曾编写过一个印度的古老传说:在世界中心贝拿勒斯(在印度北部)的圣庙里 ...

  2. php解析word,获得文档中的图片

    背景 前段时间在写一个功能:用原生php将获得word中的内容并导入到网站系统中.因为文档中存在公式,图片,表格等,因此写的比较麻烦. 思路 大体思路是先将word中格式为doc的文档转化为docx, ...

  3. 架构师养成记--18.NIO

    有人叫new IO 我这里就叫Non-block IO 经典概念: Buffer(缓冲区):之前直接通过流,现在提供一个buffer存放数据. Channel:管道,包括ServerSocketCha ...

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

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

  5. Java多线程——同步容器类

    1.同步容器类 同步容器类包括Vector和Hashtable,是早期JDK的一部分,这些类实现的方法是:将它们的状态封装起来,并对每个共有的方法进行同步,使得每个线程只有一个线程能访问它们. 1.1 ...

  6. 判断IE浏览器的版本号

    function IEVersion() { var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isIE = userAgen ...

  7. （二）Audio子系统之new AudioRecord()

    在上一篇文章<(一)Audio子系统之AudioRecord.getMinBufferSize>中已经介绍了AudioRecord如何获取最小缓冲区大小,接下来,继续分析AudioReco ...

  8. How to deal with the problem '<' in OpenERP's view file

    In this case,if you write some stirng in your fields which contains '<' , OpenERP will give a err ...

  9. HTTPS 使用成本

    HTTPS 目前唯一的问题就是它还没有得到大规模应用,受到的关注和研究都比较少.至于使用成本和额外开销,完全不用太过担心. 一般来讲,使用 HTTPS 前大家可能会非常关注如下问题: 证书费用以及更新 ...

  10. Training Logisches Denken

    1.Das Begriff 1.1 Die Arten von Begriff 1.1.1 alleines Begriff,universales Begriff,Leeres Begriff: A ...