首页textarea 输入框自适应高度

textarea 输入框自适应高度

时间: 2023-09-13 09:13:33 浏览: 119

要实现 textarea 输入框自适应高度，可以通过 JavaScript 来实现。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <style> textarea { resize: none; /* 防止用户调整文本框大小 */ overflow: hidden; /* 隐藏溢出部分 */ min-height: 30px; /* 设置最小高度 */ } </style> </head> <body> <textarea id="myTextarea" oninput="autoResize()"></textarea> <script> function autoResize() { const textarea = document.getElementById('myTextarea'); textarea.style.height = 'auto'; // 先将高度设置为自动，以便重新计算高度 // 获取文本内容的高度 const contentHeight = textarea.scrollHeight; // 设置文本框高度 textarea.style.height = contentHeight + 'px'; } </script> </body> </html> ``` 这段代码通过监听 textarea 的 `oninput` 事件实现了自适应高度功能。在 `autoResize` 函数中，首先将 textarea 的高度设置为 'auto'，然后获取文本内容的实际高度，最后将文本框的高度设置为获取到的高度。这样就能实现 textarea 的自适应高度了。

阅读全文