有时候希望textarea 能够自动调整高度来适应输入的内容
网上看到了很多解决方案,比如动态创建一个隐藏的div,当用户输入的时候将textarea的内容绑定到div,由于div的高度会自动撑开,因此可以动态检测div的高度,然后将div的高度复制给textarea。这个方法应该是兼容性较好而且比较稳健的办法,但实在太繁琐
还有一个解决办法就是动态将textarea的scrollHeight 复制给高度。我采用的是后者
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var textarea = document.getElementById('textarea'); textarea.style.overflow = 'hidden'; var height = parseInt(window.getComputedStyle(textarea).height); var width = parseInt(window.getComputedStyle(textarea).width); var autoHeight = function() { if(this.scrollHeight <= height || this.value == '') { this.style.height=height + ' 大专栏 textarea 实现高度自动增长;px'; return; } this.style.height = this.scrollHeight + 'px'; } textarea.oninput = autoHeight; |
这个方法就是通过监听textarea的oninput 来实现,也可以监听keyup,keydown;但是如果使用keyup或者keydown来监听的话会存在一个问题,那就是如果textarea有复制或者剪切操作,keyup,keydown不会立即响应内容的变化,并且也不能响应鼠标右键粘贴。
最后再象征性地增加兼容
1 2 3 4 5 6 |
textarea.onpropertychange = function (event) { if(event.propertyName.toLowerCase() == 'value') { autoHeight(); console.log(this.value); } } |
然而悲伤的是这种方式并不适用移动端,移动端所有浏览器均测试无效
另外还有一个解决办法就是不使用textarea,而是使用普通div模拟textarea,因为div本身高度就自动增长,所有就不用担心其他问题了。实现方式就是给div设置属性contentEditable=true
,这样div就变为可编辑的了。不过这种方式在某些firefox上面,div外层会出现虚框,从而使得div的本质暴露无疑。解决办法就是css配置outline:0 none
原文地址:https://www.cnblogs.com/lijianming180/p/12258990.html
时间: 2024-10-08 03:05:35