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

最新推荐文章于 2023-07-16 21:39:38 发布

韭零后程序猿

最新推荐文章于 2023-07-16 21:39:38 发布

阅读量549

点赞数 1

分类专栏：前端文章标签： div模拟文本域

本文链接：https://blog.csdn.net/qq_34627459/article/details/77933233

版权

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何利用HTML5的contenteditable属性使div具备文本编辑功能，并通过CSS实现高度自适应效果。针对不同浏览器特性提供了兼容性解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

这里写图片描述

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

<div contenteditable="true"></div>

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

ok，最麻烦的模拟textarea的可编辑效果已经解决了，现在想要使用div实现高度自适应那就像是给花花草草松松土一样容易的。使用min-height属性基本上就一步到位了，考虑到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; 
    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代码：

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

结果如下图（全部截自IE6浏览器）：
这里写图片描述

一些注意与说明

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

outline:0;

2.Firefox浏览器下可编辑模式的div如果内部元素是空空的，那么其在获取焦点是时候，光标不可见或是与外部div齐高，这也是会暴露出自己是textarea冒牌货的，所以，默认情况下，我们可以在此div中增加一个孤单的
换行标签。但是，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。