首页帮写一个兼容性好的，textarea 自适应内容多少

帮写一个兼容性好的，textarea 自适应内容多少

时间: 2024-11-03 16:18:50 浏览: 25

为了创建一个兼容性强、自适应textarea的内容高度，你可以使用HTML5的`rows`属性结合JavaScript来动态调整高度。下面是一个基本示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> textarea { resize: none; /* 阻止用户改变行数 */ overflow-y: auto; /* 当内容超过可视区域时显示滚动条 */ padding: 0.5em; box-sizing: border-box; /* 包含边框和内边距的尺寸计算 */ } </style> </head> <body> <textarea id="dynamic-textarea" placeholder="输入内容..."></textarea> <script> function adjustTextareaHeight(textarea) { const content = document.createElement('p'); // 创建一个临时元素用于测量高度 content.textContent = textarea.value; const高度 = content.scrollHeight; // 获取内容实际高度 textarea.style.height = `${height}px`; // 设置textarea的高度 } // 绑定事件监听，当textarea内容变化时自动调整高度 const textareaElement = document.getElementById('dynamic-textarea'); textareaElement.addEventListener('input', () => { adjustTextareaHeight(textareaElement); }); </script> </body> </html> ``` 这个例子中，每当textarea中的文本发生变化时，`adjustTextareaHeight`函数会被触发，它会实时更新textarea的高度以适应内容长度。

阅读全文