通常情况下,一个文本框(textarea)的高度是固定的,用户可以通过拖动边框来调整文本框的大小。然而,在某些情况下,我们可能希望文本框的高度能够根据输入的内容自动调整,以便更好地显示所有文本内容。下面是一种实现textarea自适应高度的技巧:
textarea {
height: auto;
}
let textarea = document.querySelector('textarea');
textarea.addEventListener('input', function() {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
});
通过上面的代码,当用户输入内容时,textarea的高度会根据内容的多少自动调整,以确保所有文本内容都能够完整显示出来。这样就实现了textarea自适应高度的效果。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
相关推荐:css textarea高度自适应无滚动条怎么设置