关闭

textarea如何实现高度自适应?

15474人阅读 评论(1) 收藏 举报
分类:

转自: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里面的)

 其他方法

2
0

猜你在找
【套餐】Hadoop生态系统零基础入门
【套餐】嵌入式Linux C编程基础
【套餐】2017软考系统集成项目——任铄
【套餐】Android 5.x顶级视频课程——李宁
【套餐】深度学习入门视频课程——唐宇迪
【直播】广义线性模型及其应用——李科
【直播】从0到1 区块链的概念到实践
【直播】计算机视觉原理及实战——屈教授
【直播】机器学习之凸优化——马博士
【直播】机器学习&数据挖掘7周实训--韦玮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1206823次
    • 积分:11303
    • 等级:
    • 排名:第1381名
    • 原创:193篇
    • 转载:234篇
    • 译文:0篇
    • 评论:107条
    文章分类
    最新评论