首页html textarea高度自适应

html textarea高度自适应

时间: 2023-11-03 22:01:16 浏览: 171

要使HTML中的textarea元素的高度自适应，您可以使用一些CSS技巧。以下是一种常用的方法： 1. 使用CSS属性`resize: none;`来禁用textarea元素的默认大小调整功能。 2. 使用JavaScript来监听textarea元素的input事件，并根据其内容的高度动态调整textarea元素的高度。下面是一个示例代码： ```html <!DOCTYPE html> <html> <head> <style> textarea { resize: none; overflow: hidden; } </style> <script> function autoResizeTextarea(element) { element.style.height = "auto"; element.style.height = element.scrollHeight + "px"; } </script> </head> <body> <textarea oninput="autoResizeTextarea(this)"></textarea> </body> </html> ``` 在上面的示例代码中，我们首先在CSS中禁用了textarea元素的大小调整功能。然后，在JavaScript中定义了一个`autoResizeTextarea`函数，该函数会在textarea元素的input事件触发时被调用。函数内部首先将textarea元素的高度设置为"auto"，然后再设置为其内容的实际高度（即scrollHeight）。通过这种方式，textarea元素的高度会根据其内容的多少而自适应调整。

阅读全文