&nbs p;
一、关于textarea文本域以及高度自适应
<textarea> 标签为表单元素，一般用在多行文字的输入。在web应用上常见的是评论输入框，微博信息输入框等。例如企鹅微博的输入框：
作为多行文本域功能来讲， textarea 满足了我们大部分的需求。然而， textarea 有一个不足就是不能像普通 div 标签一样高度可以跟随内容自适应。 textarea 总是很自信地显摆它的滚动条，高度固执地岿然不动。所以，有时候，为了增加交互体验想让 文本域 高度自适应的时候，就会遇到麻烦。并不是不能实现，例如 GOOGLE 的Buzz的输入框就是高度自适应里面的内容的，如下截图：
不说远的，我 个人网站 的提问与交流页面中的回答输入框（需登录）：
当输入一些文字后，文本域的高度自动随内容多少撑高了：
然而，这些文本域的高度自适应都是通过JavaScript脚本实现的。拿我个人站点上的高度自适应文本框来说，要克隆一个隐藏的 textarea ，通过实时的文字赋值，检测 是否 产生滚动条来确定显示文本域的高度是否动态增加。对于JavaScript不熟悉的人来讲，这种方法的实现比想办法跟校花约会还麻烦。
然而，实际上，如果你要求不是很高，是个非常简便，且老少皆宜的实现方法的。这种方法就是使用普通的 <div> 标签模拟 <textarea> 文本域，同时又 利用 了 <div> 标签的高度自适应性。于是，textarea文本域的高度自适应效果就可以轻松实现。
二、div模拟textarea文本域及高度自适应
我之前 翻译 过一篇 文章 ，名为“你必须 知道 的28个 HTML 5特征、窍门和技 术 ”，其中在“六、内容可编辑”部分介绍了一个标签属性，为contented IT able，顾名思意，就是允许用户编辑元素内容包含的任意文本，包括子元素。
应用了此属性后，普通的div标签也会像文本域一样可以获得 焦点 ，同时有一个 光标 在那里闪啊闪，闪啊闪，你越看她她越闪。web QQ 2.0 的聊天 对话 框的输入框就是应用了此属性。
//zxx:企鹅的圣诞主题界面很nice，视觉效果很赞，下雪的效果也很有爱，连cup也为之奔腾。
使用很 简单 ，一个普通的block元素上加个 contenteditable="true" 就ok了，如下：
<div contenteditable="true"></div>
true 外面的引号甚至去掉都没关系。
contenteditable 属性虽是HT ML 5里面的内容，但是IE似乎老早就支持此标签属性了。所以，兼容性方面还是 不用 太担心的。
ok，最麻烦的模拟textarea的可编辑效果已经解决了，现在想要使用 <div> 实现高度自适应那就像是给花花草草松松土一样容易的。使用 min-h ei ght 属性基本上就一步到位了，考虑到IE6浏览器对 min / max 家族不屑一顾，结合其内部元素溢出会撑开父标签高 宽 的特性，IE6浏览器直接定高就可以了。于是，假设我们要实现默认200像素高度，高度可随内容自适应的效果，直接下面两个样式就可以了：
{ min-height: 200px; _height: 200px; } 于是，把说到现在的内容结合一起，就可以使用div模拟textarea文本域轻松实现高度自适应了。
如下测试代码——
CSS 代码：
. test _box { width: 400px; min-height: 120px; max-height: 300px; _height: 120px; m arg in-left: auto; mar gin -right: auto; padding: 3px; outline: 0; border: 1px solid # a0b3d6; font- Size: 12px; word-wrap: br eak-word; overflow-x: hidden; overflow-y: auto; _overflow-y: visible; } HTML代码：
<div class="test_box" contenteditable="true"><br /></div>
结果如下图（全部截自IE6浏览器）：
然后从 新浪博客 首页随便找篇文章，拷点文字复制进去，结果如下图：
可以看到可编辑标签高度 自带 撑开了。完全的CSS，没有杂碎的js代码。我们设置可以设定一个最大高度( max-height )，让其超出的时候出现滚动条，正如下面demo页面所做的一样。
您可以狠狠地点击这里：div模拟textarea以实现高度自适应demo
然而，事情并不会如此一帆风顺，还有不少注意 事项 值得一提。
三、一些注意与说明
1、 现代浏览器如Firefox在可编辑模式下的div获取焦点的时候会有虚框，而实际上 textarea 是没有虚框显示的，此迹象会暴露出 <div> 是个冒牌货，所以，需要添加下面的样式：
outline:0;
2、 Firefox浏览器下可编辑模式的 div 如果内部元素是空空的，那么其在获取焦点是时候，光标不可见或是与外部 div 齐高，这也是会暴露出自己是 textarea 冒牌货的，所以，默认情况下，我们可以在此 div 中增加一个孤单的 <br> 换行标签。但是，IE8下，如果有个默认的 <br> 标签，光标位置可能会在第二行闪来闪去，所以，IE8下可编辑 div 里面默认是不能有 <br> 标签的，这个嘛，您自己想办法清掉吧。
3、 IE浏览器下（IE6~8），输入文字回车的时候， <div> 内部是会自动产生 <p> 标签包含每行元素的，而其他浏览器貌似是产生 <br> 标签（这里尚未全部测试，如有不准，欢迎指正）。由于默认的 <p> 标签是有 1em 大小的上下 margin 值的，为了效果 统一 ，我们可以设置诸如下面的样式清除 <p> 标签的 margin 值：
.test_box p{ margin: 0; } 4、可编辑模式的div输入的内容都会是很正宗的HTML代码，如果作为内容提交的话需要进行HTML字符过滤。还有，如果您是 从其 他页面上拷贝一段内容过来，然后粘贴到可编辑模式下的 <div> 中，会连HTML也完整的复制过来的（不同于 <textarea> ），所以，这里也有必要进行HTML字符过滤（例如web QQ）。
5、 IE6浏览器不支持 max-height 属性，所以，只用CSS是无法实现超过一定高度出现滚动条的效果，需要js配合实现。
6、 可编辑模式的 div 标签与 textarea 一样，是支持 focus , blur 事件的。自然也支持 focus 伪类 ，demo页面中Firefox等现代浏览器获取焦点时的外发光就是使用的 :focus 。
四、圣诞前夜之结语
明天 平安夜， 公司 的老外市场主管raph已经回家过年去了，这几天是不会过来了。像圣诞节这种具有喜庆气息的 日子 ，正是埋头写代码的好日子，因为比较容易受刺激。麻麻，无所谓啦，闷骚无敌，大不了什么时候去百合网，世纪佳缘什么的溜达溜达。
啊，就这些，感谢您的阅读。要是文章有表述不准确的地方欢迎指正。
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-div模拟textarea文本域轻松实现高度自适应 全部内容，希望文章能够帮你解决 html5教程-div模拟textarea文本域轻松实现高度自适应 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-div模拟textarea文本域轻松实现高度自适应的详细内容...