注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

朱文龙(Z.Mofei)的blog

当你能飞的时候就不要放弃飞翔。

 
 
 

日志

 
 

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

2011-08-12 17:41:11|  分类: 【前端】CSS&HTMl |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

一、关于textarea文本域以及高度自适应

textarea标签为表单元素,一般用在多行文字的输入。在web应用上常见的是评论输入框,微博信息输入框等。例如企鹅微博的输入框:
div模拟textarea文本域轻松实现高度自适应 - 朱文龙 (Z.Mofei) - 朱文龙(Z.Mofei)的blog

作为多行文本域功能来讲,textarea满足了我们大部分的需求。然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应。textarea总是很自信地显摆它的滚动条,高度固执地岿然不动。所以,有时候,为了增加交互体验想让文本域高度自适应的时候,就会遇到麻烦。并不是不能实现,例如Google的Buzz的输入框就是高度自适应里面的内容的,如下截图:
div模拟textarea文本域轻松实现高度自适应 - 朱文龙 (Z.Mofei) - 朱文龙(Z.Mofei)的blog
div模拟textarea文本域轻松实现高度自适应 - 朱文龙 (Z.Mofei) - 朱文龙(Z.Mofei)的blog

不说远的,我个人网站的提问与交流页面中的回答输入框(需登录):
div模拟textarea文本域轻松实现高度自适应 - 朱文龙 (Z.Mofei) - 朱文龙(Z.Mofei)的blog

当输入一些文字后,文本域的高度自动随内容多少撑高了:
div模拟textarea文本域轻松实现高度自适应 - 朱文龙 (Z.Mofei) - 朱文龙(Z.Mofei)的blog

然而,这些文本域的高度自适应都是通过JavaScript脚本实现的。拿我个人站点上的高度自适应文本框来说,要克隆一个隐藏的 textarea,通过实时的文字赋值,检测是否产生滚动条来确定显示文本域的高度是否动态增加。对于JavaScript不熟悉的人来讲,这种方法的实现比想办法跟校花约会还麻烦。

然而,实际上,如果你要求不是很高,是个非常简便,且老少皆宜的实现方法的。这种方法就是使用普通的div标签模拟textarea文本域,同时又利用了div标签的高度自适应性。于是,textarea文本域的高度自适应效果就可以轻松实现。

二、div模拟textarea文本域及高度自适应

我之前翻译过一篇文章,名为“你必须知道的28个HTML5特征、窍门和技术”,其中在“六、内容可编辑”部分介绍了一个标签属性,为contenteditable,顾名思意,就是允许用户编辑元素内容包含的任意文本,包括子元素。

应用了此属性后,普通的div标签也会像文本域一样可以获得焦点,同时有一个光标在那里闪啊闪,闪啊闪,你越看她她越闪。web QQ 2.0 的聊天对话框的输入框就是应用了此属性。
div模拟textarea文本域轻松实现高度自适应 - 朱文龙 (Z.Mofei) - 朱文龙(Z.Mofei)的blog

//zxx:企鹅的圣诞主题界面很nice,视觉效果很赞,下雪的效果也很有爱,连cup也为之奔腾。

使用很简单,一个普通的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浏览器):
div模拟textarea文本域轻松实现高度自适应 - 朱文龙 (Z.Mofei) - 朱文龙(Z.Mofei)的blog

然后从新浪博客首页随便找篇文章,拷点文字复制进去,结果如下图:
div模拟textarea文本域轻松实现高度自适应 - 朱文龙 (Z.Mofei) - 朱文龙(Z.Mofei)的blog

可以看到可编辑标签高度自带撑开了。完全的CSS,没有杂碎的js代码。我们设置可以设定一个最大高度(max-height),让其超出的时候出现滚动条,正如下面demo页面所做的一样。

您可以狠狠地点击这里:div模拟textarea以实现高度自适应demo
div模拟textarea文本域轻松实现高度自适应 - 朱文龙 (Z.Mofei) - 朱文龙(Z.Mofei)的blog

然而,事情并不会如此一帆风顺,还有不少注意事项值得一提。

三、一些注意与说明

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)。
div模拟textarea文本域轻松实现高度自适应 - 朱文龙 (Z.Mofei) - 朱文龙(Z.Mofei)的blog

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

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


  评论这张
 
阅读(511)| 评论(5)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017