layui-textarea的autoHeight属性在2.8+版本中完全无效,必须通过监听input事件并动态设置style.height实现自适应,关键步骤包括先设height为auto再赋scrollHeight值,且需配合box-sizing: border-box和清除父容器overflow隐藏。

layui-textarea 的 autoHeight 属性到底管不管用
它只在部分旧版 layui(如 2.5.x)中被文档提及,但实际未被核心代码支持;2.8+ 版本中 autoHeight 属性完全被忽略,写上去也没任何效果。别再往 <textarea autoHeight="true"> 里塞这个属性了——它不会触发任何自适应逻辑。
用原生 textarea + input 事件手动控制高度最可靠
layui 表单里的 <textarea> 本质还是原生元素,直接监听 input 事件并设置 style.height 是最可控的方式。关键点有三个:
-
box-sizing: border-box必须加在 CSS 里,否则scrollHeight会多算 padding 和 border - 每次设高前先设
elem.style.height = 'auto',不然内容减少时高度卡住不缩回 - 要清除默认
padding或显式减去它:比如elem.scrollHeight - 2 * parseInt(getComputedStyle(elem).paddingTop)
示例代码片段:
const el = document.querySelector('textarea[name="remark"]');
el.addEventListener('input', () => {
el.style.height = 'auto';
el.style.height = (el.scrollHeight) + 'px';
});
为什么 height 一会儿涨 4px、一会儿不收缩
常见原因是没重置 height 就直接赋新值,导致浏览器累加计算;或者 CSS 中存在 line-height 与字体大小不匹配,造成 scrollHeight 浮动。更隐蔽的坑是:layui 表单容器本身可能有 overflow: hidden,把撑开的部分裁掉了,看起来像“没变高”。
调试建议:
- 在 DevTools 里临时删掉所有父级
overflow相关样式,确认是否被裁剪 - 检查
getComputedStyle(el).lineHeight是否为normal,如果是,改用具体像素值(如24px)让scrollHeight更稳定 - 避免在
done回调或form.render()后立即操作 DOM,确保元素已挂载且样式生效
不想写 JS?试试纯 CSS 方案(有限但够用)
对输入量不大、换行少的场景,height: auto + min-height 能应付:
textarea {
height: auto;
min-height: 80px;
max-height: 200px;
resize: none;
overflow-y: hidden;
box-sizing: border-box;
}
注意:max-height 得手动设,否则内容过多时会无限撑高;overflow-y: hidden 是必须的,不然滚动条会闪一下再消失。这个方案在 Safari 和 Firefox 下表现一致,Chrome 需要配合 line-height 稳定值才不抖动。
真正难处理的是「输入后高度正确,粘贴大段文本却卡死不动」——那大概率是没监听 paste 事件,或者粘贴触发了异步渲染,得加个 setTimeout(..., 0) 延迟重算。


















