HTML网页中textarea的高度自适应怎么实现

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML网页中textarea的高度自适应怎么实现相关的知识,希望对你有一定的参考价值。

参考技术A

方法1:

$('textarea').each(function () 
  this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');).on('input', function () 
  this.style.height = 'auto';
  this.style.height = (this.scrollHeight) + 'px';);

方法2:用div模拟textarea:。代码如下。加上contenteditable属性

<div contenteditable="true"></div>

textarea如何实现高度自适应?

 

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

以上是关于HTML网页中textarea的高度自适应怎么实现的主要内容,如果未能解决你的问题,请参考以下文章

如何让textarea的高度自适应

textarea如何实现高度自适应?

div模拟textarea自适应高度

textarea如何实现高度自适应?

textarea高度自适应

textarea高度自适应问题