layui表单怎么实现文本域textarea自适应高度-Layui教程-PHP中文网

textarea自适应高度的核心原理是js读取scrollheight并写回style.height，需先设height: auto再取scrollheight以排除padding/border影响，配合min-height保底和移动端节流锁避免抖动。

layui表单怎么实现文本域textarea自适应高度

textarea自适应高度的核心原理是什么

不是靠CSS自动撑开，而是靠JS读取scrollHeight并写回style.height。因为textarea默认有padding和border，直接设height: auto在大多数浏览器里无效，且无法收缩——内容删减后高度卡死是高频问题。

监听input事件时必须重置初始高度

每次计算前都要先设textarea.style.height = 'auto'，否则scrollHeight会包含上一次的固定高度残留。常见错误是只写textarea.style.height = textarea.scrollHeight + 'px'，结果越输越高、删不回去。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

必须在input回调开头加textarea.style.height = 'auto'
再取textarea.scrollHeight，它已自动排除padding和border影响
建议加min-height CSS 保底，比如min-height: 100px，避免空内容时太矮

layui表单里用layedit替代textarea更省事？

不推荐。layedit是富文本编辑器，带工具栏、样式解析、iframe沙箱等额外开销，纯文本输入场景下体积大、初始化慢、移动端兼容差。如果只是要多行输入+自适应，原生textarea + 简单JS更轻量、更可控。

layedit的height配置是固定值，不支持动态撑高
它内部用iframe模拟编辑区，scrollHeight测量逻辑复杂，容易受跨域或样式污染干扰
若已有layui表单结构，只需给textarea加id或class，绑定事件即可，无需改整体架构

移动端iOS Safari下textarea高度抖动怎么处理

iOS Safari在软键盘弹起/收起时会触发多次input，导致scrollHeight反复波动。不能只靠节流，得加状态锁和延迟校验。

用setTimeout包裹高度设置，延迟16ms（一帧），避开键盘动画中间态
记录上一次有效scrollHeight，新值与旧值差值小于10px时跳过更新
监听focus和blur，在blur后强制调用一次textarea.style.height = 'auto'; textarea.style.height = textarea.scrollHeight + 'px'，修复收起键盘后的高度残留

实际最简可用代码：

const el = document.querySelector('textarea[name="remark"]');
el.addEventListener('input', () => {
  el.style.height = 'auto';
  el.style.height = (el.scrollHeight) + 'px';
});

真正难的不是撑高，而是撑高后不破坏表单布局、不遮挡提交按钮、不和layui的form.render()冲突——这些细节往往被忽略，直到上线才暴露。