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来处理美化细节,代码如下:
#textarea {
width:300px;
border:1px solid #ccc;
min-height:150px;
max-height:300px;
overflow: auto;
font-size: 14px;
outline: none;
}
完整的演示如下:
ok,我们的目的已经达成了,十分完美,利用这一方法,我们还可以实现很多textarea无法实现的功能,比如在textarea里设置局部字体的颜色、字体大小等等,可以说我们实现了一个能够识别html代码的textarea。效果如下:
好了,大功告成!
文章来源:前端观察