阅读量:1
textarea元素的高度可以通过CSS样式来控制,也可以通过JavaScript来动态调整。以下是一种使用JavaScript来自动调整textarea高度的方法:
<!DOCTYPE html> <html> <head> <style> textarea { resize: none; /* 禁止用户调整textarea的大小 */ overflow: hidden; /* 隐藏额外内容 */ min-height: 50px; /* 设置最小高度 */ max-height: 200px; /* 设置最大高度 */ } </style> </head> <body> <textarea id="myTextarea" oninput="autoResize(this)"></textarea> <script> function autoResize(textarea) { textarea.style.height = 'auto'; // 重置高度 textarea.style.height = textarea.scrollHeight + 'px'; // 设置高度为内容实际高度 } </script> </body> </html>
在这个例子中,textarea元素的高度会随着输入内容的增加而自动调整。每次输入内容改变时,会触发autoResize
函数,并重新计算textarea的高度。您也可以根据具体需求来调整最小和最大高度的值。