textarea如何实现高度自适应?

转载 2015年11月19日 09:16:12

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

 其他方法

更强大的textarea高度自适应

最近自己写了一个关于textarea高度自适应的jquery插件,说明文档可点击查看此处:http://www.fxss5201.cn/project/html/textarea/autoHeight...
  • fxss5201
  • fxss5201
  • 2017年03月18日 19:59
  • 7024

textarea的高度自适应

textarea是一个文本框,谷歌、IE、Opera默认显示两行文本,火狐默认显示3行文本,行数超过两行是会出现滚动条,可以自己设定设定一些行数来进行强制多少行进行显示。...
  • fxss5201
  • fxss5201
  • 2017年03月16日 22:57
  • 1008

TEXTAREA高度自适应自动展开

需求web开发中,使用textarea的场景非常常见。但是原生的textarea不能根据用户输入的内容来伸缩自己的高度,这个特性感觉很反人类,在一些特定下我们希望它的高度能随着内容自适应,而不出现滚动...
  • sunny_desmond
  • sunny_desmond
  • 2017年08月21日 13:40
  • 239

js实现textarea自适应高度

Title #t{ outline:none; border:thin solid rgba(82, ...
  • u012657197
  • u012657197
  • 2017年07月31日 16:18
  • 89

textarea 自适应父容器大小

textarea 自适应父容器大小
  • limenghua9112
  • limenghua9112
  • 2015年05月04日 11:30
  • 6591

textarea文本域宽度和高度(width、height)自动适应变化处理

文章来源:http://www.cnblogs.com/jice/archive/2011/08/07/2130069.html textarea宽度、高度自动适应处理方法 .commen...
  • domingoluis
  • domingoluis
  • 2011年08月10日 16:45
  • 79785

textarea如何实现高度自适应

方法:div模拟textarea文本域 第一步: 第二步: .textarea{ width: 100%; min-height: 20px; max-height:...
  • u013096666
  • u013096666
  • 2016年02月05日 13:15
  • 216

自适应拉伸高度Textarea 插件

  • 2014年01月06日 09:37
  • 2KB
  • 下载

不积跬步无以至千里----高度自适应的textarea

在某个项目里面,有这样的一个小需求。 textarea的高度自适应,当高度高于300px之后,textarea高度不再增高,出滚动条。当高度小于某个高度例如80px的时候,高度不再变小。 其实这个...
  • minidrupal
  • minidrupal
  • 2014年06月17日 20:36
  • 1756

textarea高度自适应(随着内容增加高度增加)

代码 如下:  其中   .bianji-textarea-l  是 textarea 的类名,加上这一段 js脚本之后 textarea 的高度就会随着内容自适应了 //设置...
  • ITzhongzi
  • ITzhongzi
  • 2017年06月30日 10:49
  • 2209
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:textarea如何实现高度自适应?
举报原因:
原因补充:

(最多只允许输入30个字)