Layui 中 autofocus 无效，因 form.render() 重置原生 input 导致浏览器跳过解析聚焦，且模态框初始隐藏、移动端拦截非手势触发；正确做法是在 layer.open 的 success 回调中先 form.render() 再 focus()。
autofocus 属性在 layui 表单里基本无效，必须用 js 显式调用 .focus()，且需配合 form.render() 和 dom 可见性校验。
为什么直接写 autofocus 不起作用
Layui 的 form.render() 会重置或装饰原生 <input>，导致浏览器跳过 HTML 解析阶段的 autofocus 处理；同时模态框（如 layer.open）初始是 display: none，即使属性存在，浏览器也不会触发聚焦。iOS Safari、Electron 低版本、部分安卓 WebView 还会静默拦截非用户手势触发的自动键盘弹出，autofocus 完全被忽略。
弹窗内表单的正确聚焦时机
在 layer.open 的 success 回调中操作，顺序不能错：
- 先执行
form.render('input')或form.render('text')，确保 Layui 样式和事件代理就绪 - 再用
document.getElementById('xxx').focus()，不要依赖autofocus - 若目标输入框在 iframe 弹窗（
type: 2）中，聚焦逻辑必须写在子页面内部，父页 JS 无法安全访问 iframe DOM - 避免在
setTimeout(..., 0)里调focus()——Layui 输入框无异步延迟，但加requestAnimationFrame更稳妥
动态渲染或循环列表中的第一个输入框聚焦
Vue/React 场景下，autofocus 在组件挂载时已错过解析时机；Layui 配合模板字符串插入也一样。可靠做法是：
- 用
ref或querySelector定位第一个可见且未禁用的<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()。
