转载:http://www.xuanfengge.com/textarea-on-how-to-achieve-a-high-degree-of-adaptive.html

今天需要些一个回复评论的页面,设计师给的初始界面就是一个只有一行的框。然后当时就想这个交互该怎么实现比较好,然后想起了新浪微博的做法:点击评论,默认显示一行,当输入的文字超过一行或者输入Enter时,输入框的高度会随着改变,直到输入完毕。顿时觉得这个细节做得挺不错的,可以效仿下。下面分享2种实现textarea高度自适应的做法,一种是用div来模拟textarea来实现的,用CSS控制样式,不用JS;另一种是利用JS控制的(因为存在浏览器兼容问题,所以写起来比较麻烦);

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

demo演示地址:http://www.xuanfengge.com/demo/201308/textarea/demo1.html

因为textarea不支持自适应高度,就是定好高度或者是行数之后,超出部分就会显示滚动条,看起来不美观。

而用DIV来模拟时,首先遇到的问题是:div怎么实现输入功能?

可能我们还是第一次见到这个属性contenteditable,如一个普通的block元素上加个contenteditable="true"就实现编辑,出现光标了。如

contenteditable属性虽是HTML5里面的内容,但是IE似乎老早就支持此标签属性了。所以,兼容性方面还是不用太担心的。

CSS代码

 HTML代码

CSS代码中,因为IE6不支持min/max,所以做了hack,其他的也好理解。

 

方法二:文本框textarea根据输入内容自适应高度

demo演示地址:http://www.xuanfengge.com/demo/201308/textarea/demo2.html

这个写法是用原生JS写的,考虑了很多兼容性问题,完全和新浪微博的回复效果一样的功能。有兴趣的童鞋可以仔细分析下代码。

CSS代码

javascript代码

HTML代码(写在body里面的)