div模拟textarea文本域如何实现高度自适应

今天就跟大家聊聊有关div模拟textarea文本域如何实现高度自适应，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

p的contenteditable属性能够允许用户编辑元素内容包含的任意文本，包括子元素,这是模拟文本域的关键

应用了此属性后，普通的p标签也会像文本域一样可以获得焦点，同时有一个光标在那里闪啊闪，闪啊闪，你越看她她越闪。web QQ 2.0 的聊天对话框的输入框就是应用了此属性

使用很简单，一个普通的block元素上加个contenteditable=”true”就ok了，如下：

<p contenteditable="true"></p>

true外面的引号甚至去掉都没关系。 contenteditable属性虽是HTML5里面的内容，但是IE似乎老早就支持此标签属性了。所以，兼容性方面还是不用太担心的。

ok，最麻烦的模拟textarea的可编辑效果已经解决了，现在想要使用p实现高度自适应那就像是给花花草草松松土一样容易的。使用min-height属性基本上就一步到位了，考虑到IE6浏览器对min/max家族不屑一顾，结合其内部元素溢出会撑开父标签高宽的特性，IE6浏览器直接定高就可以了。于是，假设我们要实现默认200像素高度，高度可随内容自适应的效果，直接下面两个样式就可以了：

{ min-height: 200px; _height: 200px; }

于是，把说到现在的内容结合一起，就可以使用p模拟textarea文本域轻松实现高度自适应了。 **如下测试代码—— CSS代码：**

.test_box {    width: 400px;     min-height: 120px;     max-height: 300px;    _height: 120px;     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代码：

<p class="test_box" contenteditable="true"><br /></p>

结果如下图（全部截自IE6浏览器）：

一些注意与说明

1.现代浏览器如Firefox在可编辑模式下的p获取焦点的时候会有虚框，而实际上textarea是没有虚框显示的，此迹象会暴露出p是个冒牌货，所以，需要添加下面的样式：

outline:0;

2.Firefox浏览器下可编辑模式的p如果内部元素是空空的，那么其在获取焦点是时候，光标不可见或是与外部p齐高，这也是会暴露出自己是textarea冒牌货的，所以，默认情况下，我们可以在此p中增加一个孤单的换行标签。但是，IE8下，如果有个默认的br标签，光标位置可能会在第二行闪来闪去，所以，IE8下可编辑p里面默认是不能有br标签的，这个嘛，您自己想办法清掉吧。

3、 IE浏览器下（IE6~8），输入文字回车的时候，p内部是会自动产生p标签包含每行元素的，而其他浏览器貌似是产生br标签（这里尚未全部测试，如有不准，欢迎指正）。由于默认的p标签是有1em大小的上下margin值的，为了效果统一，我们可以设置诸如下面的样式清除p标签的margin值：

.test_box p{ margin: 0; }

4、可编辑模式的p输入的内容都会是很正宗的HTML代码，如果作为内容提交的话需要进行HTML字符过滤。还有，如果您是从其他页面上拷贝一段内容过来，然后粘贴到可编辑模式下的p中，会连HTML也完整的复制过来的（不同于textarea），所以，这里也有必要进行HTML字符过滤（例如web QQ）。

5、 IE6浏览器不支持max-height属性，所以，只用CSS是无法实现超过一定高度出现滚动条的效果，需要js配合实现。

6、 可编辑模式的p标签与textarea一样，是支持focus, blur事件的。自然也支持focus伪类，demo页面中Firefox等现代浏览器获取焦点时的外发光就是使用的:focus。

看完上述内容，你们对div模拟textarea文本域如何实现高度自适应有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。