autofocus在layui中无效,因form.render()重置原生input导致浏览器跳过解析聚焦,且模态框初始隐藏、移动端拦截非手势触发;正确做法是在layer.open的success回调中先form.render()再focus()。

autofocus 属性在 Layui 表单里基本无效,必须用 JavaScript 显式调用 .focus(),且需配合 form.render() 和 DOM 可见性校验。
为什么直接写 autofocus 不起作用
Layui 的 form.render() 会重置或装饰原生 <input>,导致浏览器跳过 HTML 解析阶段的 autofocus 处理;同时模态框(如 layer.open)初始是 display: none,即使属性存在,浏览器也不会触发聚焦。iOS Safari、Electron 低版本、部分安卓 WebView 还会静默拦截非用户手势触发的自动键盘弹出,autofocus 完全被忽略。
layer.open 弹窗内表单的正确聚焦时机
在 layer.open 的 success 回调中操作,顺序不能错:
- 先执行
form.render('input')或form.render('text'),确保 Layui 样式和事件代理就绪 - 再用
document.getElementById('username').focus(),不要依赖autofocus - 若目标输入框在 iframe 弹窗(
type: 2)中,聚焦逻辑必须写在子页面内部,父页 JS 无法安全访问 iframe DOM - 避免在
setTimeout(, 0)里调focus()—— Layui 输入框无异步延迟,但加requestAnimationFrame更稳妥
动态渲染或循环列表中的第一个输入框聚焦
Vue/React 场景下,autofocus 在组件挂载时已错过解析时机;Layui 配合模板字符串插入也一样。可靠做法是:
- 定位第一个可见且未禁用的
<input> - 检查
document.activeElement !== targetEl,防止覆盖用户当前操作 - 在
DOMContentLoaded或layer.success后立即执行,不依赖autofocus - 移动端可加兜底:监听一次
click或touchstart,回调中立刻targetEl.focus()
容易被忽略的兼容性细节
某些 Electron 环境或旧版 Chrome 下,.focus() 调用后光标不显示、输入框无响应,本质是浏览器阻止了“非用户触发”的焦点行为。此时必须确保:
- 输入框未设
disabled或readonly - 父容器没有
inert属性或tabindex="-1" - 元素已渲染且
offsetParent !== null(即非display: none) - 聚焦前调用
.scrollIntoView({ block: 'nearest' })避免被遮挡,尤其在fixed定位弹窗中
真正起作用的从来不是 autofocus 属性,而是你判断 DOM 是否就绪、是否可见、是否可交互的那一行 .focus()。











