你的位置:首页 > 网页设计

[网页设计]div模拟textarea实现高度自增长


今天突然有位前端的朋友问我textarea怎么实现高度随内容自增长,我一下子懵了,首先想到的是用js改变textarea的高度,但是百度了很多参考代码效果都不是很理想。

因为之前实际项目中用的textarea都是定死高度后超出实现滚动条的,如果不是对用户体验太在意的话没必要去搞什么高度自增长......

然而优秀的设计都是眼里融不进沙子的,没有什么是不可能实现的,接下来就介绍下如何通过div来模拟一个textarea实现高度自增长(当然利用js也可以实现,但是个人感觉没有必要)。

ok,那么我就来现学现教了,首先敲一个div出来:

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

大家一定发现了一个很少见的属性 contenteditable ,what?这是什么?懂英文的小伙伴一看可能就懂了,应该是内容可编辑的意思咯,没错,通过设置这一属性为true就可以对div里的内容像textarea一样进行编辑了,是不是很赞!

然而相信90%的小伙伴会问:这属性应该是HTML5的吧,IE它不兼容吧。。。

很遗憾,让这些小伙伴失望了,你们只答对了一半,contenteditable确实是HTML5的属性,但是这一次IE却领先了一步,早在很早之前IE就支持了这一属性,至少IE6是没有问题的,所以兼容性方面大家可以放心了。

相信现在小伙伴们已经目瞪口呆了,这么实用!这么简单!一定收藏了先!

慢着,咱们还没说完呢,既然div已经取代了textarea,接下来我们还得模仿不是吗?至少也得模仿的像一点才是嘛。

咱们可以通过设置min-height、max-height来对高度进行设定,通过设置padding、outline、font-size、overflow来处理美化细节,代码如下:

1 #textarea {2    width:300px;3    border:1px solid #ccc;4    min-height:150px;5    max-height:300px;6    overflow: auto;7    font-size: 14px;8    outline: none; 9 }

完整的演示如下:

ok,我们的目的已经达成了,十分完美,利用这一方法,我们还可以实现很多textarea无法实现的功能,比如在textarea里设置局部字体的颜色、字体大小等等,可以说我们实现了一个能够识别html代码的textarea。效果如下:

好了,大功告成!

 

感谢阅读,本文灵感来自:http://www.zhangxinxu.com  转载请注明出处,欢迎大家评论。

原创文章,转载请注明来自一个萝卜一个坑  -博客园[http://www.cnblogs.com/luozhihao]
本文地址:http://www.cnblogs.com/luozhihao/p/4745365.html