知识问答
如何用JavaScript实现textarea的自动调整大小？
2025-09-22 02:20:30
来源：互联网转载
``
javascript，textarea {， resize: vertical;，}，``让textarea自动调整大小的JavaScript代码
要实现一个textarea元素在输入内容时自动调整大小，我们可以使用JavaScript来**input事件，并根据输入内容的行数和每行的字符数动态调整textarea的高度，以下是一个简单的示例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Auto Resize Textarea</title> <style> textarea { overflow: hidden; resize: none; } </style></head><body> <textarea id="myTextarea" rows="3"></textarea> <ｓｃｒｉｐｔ> const textarea = document.getElementById('myTextarea'); // 计算文本框的行高 function getLineHeight() { const style = window.getComputedStyle(textarea); return parseInt(style.lineHeight, 10); } // 更新文本框高度 function updateHeight() { const lineHeight = getLineHeight(); const lines = textarea.value.split('\n').length; const newHeight = lines * lineHeight + 'px'; textarea.style.height = newHeight; } // **输入事件并更新高度 textarea.addEventListener('input', updateHeight); </ｓｃｒｉｐｔ></body></html>单元表格
| 功能 | 描述 |
overflow: hidden; | 隐藏超出文本框的内容 |
resize: none; | 禁止手动调整文本框大小 |
getLineHeight() | 获取文本框的行高 |
updateHeight() | 根据输入内容更新文本框高度 |
textarea.addEventListener('input', updateHeight); | **输入事件并调用updateHeight()函数 |
相关问题与解答
问题1：如何限制textarea的最大高度？
答案：你可以在CSS中设置max-height属性来限制textarea的最大高度。
textarea { max-height: 200px; /* 你可以根据需要设置具体数值 */}这样，即使文本框的内容超出了设定的最大高度，它也不会继续增长。
问题2：如何在textarea失去焦点时恢复默认高度？
答案：你可以**blur事件，并在事件处理函数中将textarea的高度设置为其默认值或空字符串。
textarea.addEventListener('blur', () => { textarea.style.height = ''; // 或者设置为默认高度，如 '153px'});这样，当用户点击页面的其他部分或按下Tab键离开textarea时，它将恢复到默认高度。
到此，以上就是小编对于“让textarea自动调整大小的js代码-javascript技巧”的问题就介绍到这了，希望介绍的几点解答对大家有用，有任何问题和不懂的，欢迎各位朋友在评论区讨论，给我留言。
