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

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

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

然而，设置过后，然并卵，问题依旧，继续网上找解决方案，终于在https://segmentfault.com/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用实际从后台返回的结果填充。

经测试，方法可行。

html textarea 自动高度,HTML页面中textarea高度自适应解决方案相关推荐

js获取window窗口高度（页面滚动条可滚动高度） - 代码篇
js中获取窗口高度的方法取窗口滚动条滚动高度 (如下文 · 截图) 一. javascript 和 jquery代码: //原生 javascript 代码: let scrollHeight = ...
php设置页面最小高度,HTML_CSS布局中最小高度的妙用，最小高度可以设定一个BOX的最 - phpStudy...
CSS布局中最小高度的妙用最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸,但到目前为止,只有Opera 和 Mozilla 支持,IE7开始也 ...
html页面中DIV高度100%设置问题
初学HTML5,需要实现网页DIV左右居中,高度自动填充到100.发现对页面中DIV设置100%高度属性时无效.后来查资料发现HTML网页中div高度继承自父元素-->body-->htm ...
html表格填充随页面大小自动缩放,一个简单的html表格自适应解决方案
1.他们有一些在实际中是难以实现的,尤其是那些依靠::before伪元素来生成表头的. 2.他们之中有一些不适合所有类型中的表数据,例如pie chart. 3.他们之中有一些可能被用户所拒绝.例如消 ...
小程序全局状态管理，在页面中获取globalData和使用globalSetData
GitHub: https://github.com/WozHuang/mp-extend 主要目标微信小程序官方没有提供类似vuex.redux全局状态管理的解决方案,但是在一个完整的项目中各组件 ...
android设置布局高度自适应,4种Android屏幕自适应解决方案
Android支持多屏幕机制即用为当前设备屏幕提供一种合适的方式来共同管理并解析应用资源.本文就介绍了4中Android屏幕自适应解决方案. 一.细说layout_weight 目前最为推荐的Andr ...
php多行文本框代码,1分钟实现多行文本框[textarea]自动高度jquery 插件
支持初始化加载textarea高度支持复制文字自动高度支持长段不换行文字支持连续回车和连续删除自动高度内容 $.extend({ textareaAutosize_dc:function(){ ...
小程序中textarea自适应高度的问题
在学习小程序过程,在textarea的使用上,碰到过两个问题,这里分享一下: 一.设置style里的height属性无效解决方法: /*XXX.wxss*/ page{height: 100%; } ...
vue中textarea标签自适应高度
textarea.js文件 /** * 文本框根据输入内容自适应高度 * @param {HTMLElement} 输入框元素 * @param {Number} 设置光标与输入框保持的距离(默认0) ...

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

html textarea 自动高度,HTML页面中textarea高度自适应解决方案相关推荐

最新文章

热门文章