1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > html textarea 自动高度 HTML页面中textarea高度自适应解决方案

html textarea 自动高度 HTML页面中textarea高度自适应解决方案

时间:2020-03-05 03:17:33

相关推荐

html textarea 自动高度 HTML页面中textarea高度自适应解决方案

背景: 页面上加了一个div标签,div标签下有一个textarea标签,textarea的内容通过后台读取数据自动填充,希望通过textarea的高度随着内容的增减,自动调整,在网上说通过设置textarea属性可以解决,即:

onpropertychange="this.style.posHeight=this.scrollHeight" οnfοcus="this.style.posHeight=this.scrollHeight"

然而,设置过后,然并卵,问题依旧,继续网上找解决方案,终于在/q/1010000000095238

网上找了一个解决方案,这个页面有一段话,如下:

1、加入标签:

2、div设置css属性,目的是用于textarea相对于expandingArea绝对定位:

.expandingArea{

position:relative;

}

3、设置textarea的css属性

textarea{

position:absolute;

top:0;

left:0;

height:100%;

}

通过这样的样式设置,textArea的高度会始终等于expandingArea的高度,要让textarea的高度变化也只需要调整expadingArea的高度即可。那么怎么样让expandingArea的高度变化随内容高度变化而变化呢?答案就是这个pre

4、设置pre的css属性

pre{

display:block;

visibility:hidden;

}

pre以块形式存在,并且不可见,但是是占用空间的,不像display:none;什么空间也不占。这时需要把textarea中的内容实实的同时到pre里的span标签中,因为pre没有postion:absolute所以它的高度会一直影响expandingArea的高度。总结原理就是:pre会随内容的高度变化而变化,expandingArea的高度又随pre变化,因为textarea的高度100%textarea的高度会随expandingArea变化,只要同步textarea的内容到pre中,就达到一个textarea随内容高度变化的目的了

5、经过自己设置,内容如下:

content

content

其中content用实际从后台返回的结果填充。

经测试,方法可行。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。