css textarea高度自适应

CSS是层叠样式表，它可以为网页的布局和样式提供精细的控制。用户可以利用CSS来完成众多网页设计中的任务，其中有一个常见的需求就是让文本输入框的高度自适应。

一般而言，textarea 默认的高度是固定的，如果输入内容超出了预设高度，文本框会显示滚动条来使用户能够查看所有文本。但有时候，我们需要文本框的高度能够根据输入的文本长度动态调整，从而使用户更加方便地进行文本输入。

那么，我们该如何实现textarea的高度自适应呢？下面提供一种较为简单的解决方案，让大家参考。

textarea {
    overflow: hidden;
    resize: none;
}
textarea.expanding {
    height: auto;
}
    

首先，上述示例中的 textarea 样式部分，指定了如下两个样式：1）overflow:hidden，使得文本超出文本框高度时不会自动生成滚动条；2）resize:none，禁止用户通过拖拽文本框边缘来调整文本框大小。

接下来，我们为textarea添加一个类expanding，并给这个类编写样式：height:auto。这样，当用户输入的文本长度超过了文本框的高度时，textarea 就会自动调整高度，以适应文本的长度。

为了让textarea高度自适应，我们还需要在 Javascript 中实现自适应功能。具体代码如下：

const textarea = document.querySelector('textarea');
    textarea.addEventListener('input', autoResize, false);
function autoResize() {
    this.style.height = 'auto';
    this.style.height = this.scrollHeight + 'px';
}
    

其中，我们首先找到页面上的textarea元素，并为其添加事件监听函数 autoResize()。在 autoResize() 函数中，我们将textarea的height属性设为auto，使得textarea的高度可以根据内容的长度自适应，然后再将它的height属性设为scrollHeight + 'px'，scrollHeight 表示元素内容的完整高度。

好了，以上就是关于实现 CSS textarea 自适应高度的说明。希望能对大家有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！