textarea需监听input事件，重置height为auto后取scrollHeight动态设高，并注意表格中vertical-align、IE11偏差及多实例绑定时机。

textarea 默认不自动撑高，必须手动监听输入

HTML 原生 textarea 不会随内容增长自动调整高度，它只响应 rows 和 CSS 的 height，设为固定值后就会出现滚动条。要实现“随输入撑高”，本质是监听输入事件、计算内容高度、动态设置 textarea 的 height。

用 scrollHeight 获取真实内容高度最可靠

scrollHeight 返回元素内容的总高度（含溢出），不受 overflow 或 height 限制，比 clientHeight 或 offsetHeight 更适合判断文本撑开需求。注意：必须确保 textarea 已渲染且样式生效（比如不能在 display: none 容器里调用）。

实操建议：

• 监听 input 事件（覆盖输入、粘贴、删除、回车等所有修改）
• 每次触发时先重置 height 为 auto，再读取 scrollHeight，最后赋值给 style.height
• 加个最小高度（如 40px）避免空内容时过矮
• 可选：限制最大高度（如 200px），超出后显示滚动条

const $ta = document.querySelector('textarea');
$ta.addEventListener('input', () => {
  $ta.style.height = 'auto';
  $ta.style.height = Math.min($ta.scrollHeight, 200) + 'px';
});

放在表格单元格（）里要注意垂直对齐

表格默认 vertical-align: middle，而动态撑高的 textarea 高度变化时，若父 没有明确设置 vertical-align: top，会导致上下跳动或对齐错位。

实操建议：

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

• 给 加 style="vertical-align: top;" 或统一 CSS 类
• 避免给 textarea 设 margin 或 padding 外部干扰（可用 box-sizing: border-box 稳定内边距）
• 如果表格用了 table-layout: fixed，需确保列宽足够，否则换行可能被截断

IE11 及更老浏览器需要额外处理 scrollHeight 偏差

IE11 下 scrollHeight 在某些字体/行高组合下会多算 1–2px，导致反复触发 resize、高度抖动。这不是 bug，而是其盒模型计算差异。

解决方法：

• 对 IE11 做 UA 检测，或用 document.documentMode 判断
• 在赋值前减去一个像素偏移（如 Math.max(1, $ta.scrollHeight - 1)）
• 更稳妥的做法是加防抖（setTimeout 延迟 50ms 再更新），避免高频输入导致 layout thrashing

真正容易被忽略的是：表格中多个 textarea 共享同一套逻辑时，别直接用 querySelector 取第一个——得遍历所有目标元素并分别绑定；还有，如果表格支持排序或 DOM 重绘（如 Vue/React 渲染），记得在节点挂载后才初始化高度逻辑，否则 scrollHeight 读出来是 0。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！