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。效果如下：

好了，大功告成！

 

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