textarea内容自动撑开高度,实现高度自适应
封面图
•
2026-01-11
•
Html/Css
297
0
0
0
要实现 `<textarea>` 内容自动撑开高度(即高度自适应内容),可以通过 JavaScript 动态计算内容的高度,并设置 `textarea` 的 `style.height` 属性。以下是一个常见的实现方式: --- ### ✅ 实现思路 1. 监听 `input` 或 `keyup` 事件。 2. 在事件处理函数中,将 `textarea` 的 `style.height` 设置为 `0`(重置高度)。 3. 然后将 `textarea` 的 `style.height` 设置为 `scrollHeight`(内容的实际高度)。 --- ### ✅ 示例代码(HTML + JavaScript) ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Auto Resize Textarea</title> <style> textarea { width: 100%; padding: 10px; box-sizing: border-box; resize: none; /* 禁用用户手动调整大小 */ } </style> </head> <body> <textarea id="autoResizeTextarea" placeholder="请输入内容..."></textarea> <script> const textarea = document.getElementById('autoResizeTextarea'); function autoResize() { textarea.style.height = '0'; // 重置高度 textarea.style.height = textarea.scrollHeight + 'px'; // 设置为实际内容高度 } // 监听输入事件 textarea.addEventListener('input', autoResize); // 初始调用一次,防止页面加载时高度为0 autoResize(); </script> </body> </html> ``` --- ### ✅ 注意事项 - `scrollHeight` 是元素内容的总高度,包括不可见的部分。 - 使用 `resize: none;` 可以避免用户手动调整大小。 - 如果你需要支持旧浏览器(如 IE),可能需要使用其他方法或 polyfill。 --- ### ✅ 可选优化:防抖(Debounce) 如果你的文本框内容频繁变化,可以加一个防抖来减少性能消耗: ```javascript function debounce(func, delay) { let timer; return function (...args) { clearTimeout(timer); timer = setTimeout(() => func.apply(this, args), delay); }; } textarea.addEventListener('input', debounce(autoResize, 100)); ``` --- 如果你有其他需求,比如限制最大高度、支持富文本编辑器等,也可以告诉我,我可以提供更详细的解决方案。
上一篇:
CSS 实现自动换行、强制换行、强制不换行的属性
下一篇:
html中的空格符号( nbsp; ensp; emsp; )介绍以及中文对齐实现的方法
标题录入,一次不能超过6条
留言
评论