如何让textarea随着内容自适应高度
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何让textarea随着内容自适应高度相关的知识,希望对你有一定的参考价值。
参考技术A (1)、使用 contenteditable 属性,可让 div 具有编辑输入效果(2)、模拟 placeholder 的提示效果,此处直接用 CSS 实现
(3)、contenteditable 在ios上有兼容性,虽然能聚焦,但是不能输入内容,此时需要借助属性 -webkit-user-select: text , 来解决这个兼容性
(4)、缺点:获取 div 文本的时候,内部会包含一些html标签,所以需要单独处理转译的数据,才能正常使用数据
(1)、设置一个 div 与 textarea 同层级,外层包裹一个 div ,定位为 relative
(2)、textarea 绝对定位,宽度高度均为 100%,相对于父层 div 来说
(3)、内部 div,设置为 relative, 在检测 textarea 的 onchange 事件的时候,把文本填充到内部 div 里面,以此来撑开父层 div 的高度和宽度
(4)、给内部 div 设置 不可见属性,visibility:hidden,这样 div 是看不见的,但是它的物理位置是存在的,所以能够撑开父层 div
(5)、该方案相对于方案一来说,更简便和完美,尤其是需要获取输入内容的时候
如何让textarea的高度自适应
另外找一个元素,和textarea设置一样的样式,当textarea输入的时候,将内容填充到该元素内,然后再将该元素的高度赋值给textarea。这个元素比较苛刻了,不仅要接收textarea的文字内容,也要接收格式,比如回车什么的,很明显是pre标签了。
写在pre标签里的东西可以原格式输出,如果要在别的元素,比如div上实现类似的效果,可能需要使用一些CSS,比如white-space:pre,诸如此类的代码。
直接上代码了:
首先准备一个pre,一个textarea:
<pre class="input" id="pre"></pre>
<textarea class="input" id="textarea"></textarea>
然后给他们设置相同的样式:
.input
padding: 10px;
width: 300px;
min-height: 150px;
border: 1px solid #ccc;
resize: none;
font-size: 20px;
line-height:30px;
overflow: hidden;
word-wrap: break-word;
这里设置了min-height,给他们一个最小高度,里面的字体行高的都设置的一样,这样他们的表现就一致了。注意:为了纯英文的换行,加上word-wrap。
最后一段简单的脚本:
var textarea = document.getElementById('textarea');
var pre = document.getElementById('pre');
textarea.oninput = function()
pre.textContent = textarea.value;
textarea.style.height = pre.offsetHeight + 'px';
监听textarea的input事件,更新自身的高度。
这时候,高度自适应的textarea已经构造完成了。但是pre这个元素我们是不想让他显示的,需要把他隐藏掉,但不能简单的display:none,这样就取不到pre的高度了,所以使用另外一个属性visibility,不过这个属性还是会占用空间的,把pre绝对定位即可:
.hide
position: absolute;
z-index: -100;
visibility: hidden;
<pre class="input hide" id="pre"></pre>
大功告成!
不过还有一些兼容性工作要做,IE8以下是不支持oninput事件的,但他们支持一个更强大的属性:onpropertychange。
可能有的童鞋会觉得可以使用onkeyup或者onkeydown事件,我在chrome下试验了下,在textarea改变高度的时候,会有闪动,oninput的表现就比较平滑。推荐使用oninput。 参考技术A 利用textarea的scrollHeight属性,设置高度为scrollHeight。本回答被提问者采纳
以上是关于如何让textarea随着内容自适应高度的主要内容,如果未能解决你的问题,请参考以下文章