textarea加autoHeight="true"不生效,因layui原生不支持该属性;需手动实现input事件监听+scrollHeight计算,且form.render()会重置高度,表格中还需禁用lineStyle并同步三处tr高度。

textarea 加 autoHeight="true" 属性没反应?先确认是否引入了配套 JS
layui 自身不内置 autoHeight 属性支持,这个写法常见于自定义封装或第三方插件(比如 jQuery 插件),不是 layui 原生能力。直接写 <textarea autoHeight="true"></textarea> 不会生效,除非你额外加载了类似这样的脚本:
$.fn.autoHeight = function() {
this.each(function() {
const elem = this;
const autoHeight = () => {
elem.style.height = 'auto';
elem.scrollTop = 0;
elem.style.height = elem.scrollHeight + 'px';
};
autoHeight();
elem.addEventListener('input', autoHeight);
});
};
$('textarea[autoHeight]').autoHeight();
如果你没手动加这段逻辑,那 autoHeight 就只是个无意义的 HTML 属性。
原生 textarea 高度自适应:用 input 事件 + scrollHeight 最稳
不依赖任何框架,纯 JS 实现高度跟随内容变化,核心就是监听 input 事件、重置 height 并读取 scrollHeight。注意几个关键点:
- 必须先设
elem.style.height = 'auto',否则scrollHeight可能被固定高度截断 - 要清空
scrollTop(elem.scrollTop = 0),避免因滚动位置导致scrollHeight计算偏大 - 别漏掉
padding影响:如果textarea有padding: 10px,那实际内容区高度 =scrollHeight - 20,但通常直接设scrollHeight更简单,浏览器会自动包含 padding - 移动端 iOS Safari 对
input事件响应有时延迟,可加compositionend兜底中文输入
简短示例:
const el = document.querySelector('textarea');
const resize = () => {
el.style.height = 'auto';
el.style.height = el.scrollHeight + 'px';
};
el.addEventListener('input', resize);
el.addEventListener('compositionend', resize);
resize(); // 初始化
layui 表单内 textarea 撑开后,form.render() 会重置高度?
是的,这是高频踩坑点。layui 的 form.render()(尤其是带参数如 'textarea')会重新初始化所有 textarea,把内联 style.height 清空回默认值。
解决办法只有两个:
- 避免在撑高后主动调
form.render(),除非真需要刷新验证规则等 - 如果必须调,就在
form.render()后立刻再执行一次你的 resize 函数(可封装成resetTextareaHeight(el))
特别注意:layui 的 form.on('submit(...)') 默认会触发一次 form.render(),所以提交前记得重设高度,否则用户看到的可能是被“压扁”的文本框。
表格里嵌 textarea 怎么撑开?别只盯单元格 CSS
layui.table 单元格里放 textarea,即使它自己撑开了,整行 <tr> 高度也不会变——因为 layui 2.8+ 默认给 tr 写了固定 height: 40px 内联样式(来自 lineStyle 配置)。
必须组合操作:
- 初始化表格时设
lineStyle: false,禁用 layui 的行高锁定 - 在
done回调里遍历每行tr,取该行所有td中最大的scrollHeight,再设tr.style.height - 同时处理三处 DOM:
.layui-table-main tr、.layui-table-fixed-l tr、.layui-table-fixed-r tr,不然左右固定列会错位
遗漏任意一点,都会出现“内容撑开了,但下面一行盖住它”或者“左边列高度正常,右边列被截断”的现象。
真正麻烦的从来不是怎么让 textarea 变高,而是它嵌在 layui 的各种容器里时,那些看不见的内联样式、DOM 结构分层、以及异步渲染时机。每次撑开前,先打开开发者工具看一眼当前元素上到底有哪些 style 被谁写了,比查文档更快。


















