layui 中 textarea autofocus 失效是因为 form.render() 重绘 dom 且异步渲染导致原生属性被忽略;正确做法是在 layer.open 的 success 回调中先 form.render() 再 document.getelementbyid().focus(),表格 edit 中需在 done 回调绑定 click 事件并立即 focus。

textarea autofocus 属性为什么在 Layui 里完全不生效
因为 Layui 的 form.render() 会重绘原生 <textarea></textarea>,替换为带 layui-textarea 类的包装结构,浏览器在 DOM 插入阶段已跳过对原始 autofocus 的解析;更关键的是,Layui 表单组件(包括弹窗、表格编辑单元格)默认异步渲染,元素尚未挂载到文档流时,autofocus 就已失效。
layer.open 弹窗中 textarea 聚焦的正确时机和写法
必须在 layer.open 的 success 回调里操作,且顺序不能错:
- 先执行
form.render('textarea')或form.render('input')(Layui 2.8+ 支持'textarea',旧版用'input'也能覆盖) - 再用原生 JS 获取元素并调用
.focus(),例如:document.getElementById('desc').focus() - 若目标是动态插入的 textarea(如表格 edit 函数返回的),需确保它已渲染完成——
success回调内直接查 DOM 是安全的 - 移动端要加兜底:监听一次
click或touchstart,回调中立刻.focus(),否则 iOS Safari 可能静默拦截
表格中 edit 函数返回的 textarea 怎么自动聚焦
Layui 表格的 edit 属性不支持字符串 'textarea',必须用函数返回 HTML 字符串,但此时不会自动聚焦。解决方式是在 table.render() 的 done 回调中绑定事件:
- 用
layui.$(this.elem).find('textarea')查找所有新插入的textarea - 对每个元素绑定
click事件,并立即调用this.focus() - 必须加
e.stopPropagation(),防止冒泡触发表格行选中或跳转等副作用 - 别用
setTimeout(0, () => this.focus())——没这个必要,DOM 已就绪,直接调用即可
容易被忽略的聚焦失败原因
即使写了 .focus(),也可能光标不显示、键盘不弹出,常见原因有:
-
textarea父容器是display: none或visibility: hidden,检查offsetParent !== null - 元素设置了
disabled或readonly,或父级有inert属性 - 未滚动到可视区域,尤其在
fixed定位弹窗中,聚焦前建议加this.scrollIntoView({ block: 'nearest' }) - 跨 iframe 场景下,父页 JS 无法访问子页 DOM,必须把聚焦逻辑写进子页面内部,且等
DOMContentLoaded后再执行
autofocus 属性,而是你判断 DOM 是否就绪、是否可见、是否可交互的那一行 .focus()。











