如何让textarea高度自适应文本内容，无需指定rows和cols？

当然可行，不管是完全不指定rows/cols让尺寸完全适配内容，还是指定cols后让rows自动匹配行数，都可以通过前端代码实现：

1. 完全自适应（无需rows/cols） #

这种方式下，textarea的宽高都会根据内容自动调整（宽度随内容换行自适应，高度随行数变化）。核心思路是通过JavaScript监听输入事件，动态计算内容的滚动高度并设置给textarea。

代码示例 #

<textarea id="autoResize"></textarea>

<style>
#autoResize {
  padding: 8px;
  border: 1px solid #ddd;
  resize: none; /* 可选，禁止用户手动调整尺寸 */
  box-sizing: border-box;
}
</style>

<script>
function adjustTextareaHeight(el) {
  // 先重置高度为auto，确保内容减少时能自动收缩
  el.style.height = 'auto';
  // 将高度设置为内容的滚动高度（包含内边距）
  el.style.height = el.scrollHeight + 'px';
}

// 初始化时调整高度
const textarea = document.getElementById('autoResize');
adjustTextareaHeight(textarea);

// 监听输入、粘贴等事件，实时调整
textarea.addEventListener('input', () => adjustTextareaHeight(textarea));
textarea.addEventListener('change', () => adjustTextareaHeight(textarea));
</script>

2. 指定cols后让rows自适应 #

如果已经指定了cols属性固定宽度，只需要高度随行数变化，逻辑和上面完全一致，仅需在HTML里加上cols即可：

代码示例 #

<textarea id="autoResize" cols="30"></textarea>

<!-- CSS和JS部分和上面完全相同 -->

注意事项 #

• 设置box-sizing: border-box可避免内边距导致尺寸计算偏差；
• 重置高度为auto是关键，否则内容减少时textarea不会自动收缩；
• 现代浏览器对scrollHeight的支持都很完善，无需额外兼容处理。

内容的提问来源于stack exchange，提问作者lex_noob-for_now