Layui弹出层内嵌套form表单时如何实现自动对焦-Layui教程-PHP中文网

autofocus 在 layer 弹窗中不生效是因为 layer.open 异步渲染导致元素未及时挂载或被 form 模块覆盖；需在 success 回调中先执行 form.render('input') 再用 document.getElementById().focus() 聚焦，iframe 场景须在子页内处理，且须确保用户交互触发、DOM 就绪与表单渲染三者同时满足。

为什么 `autofocus` 在 layer 弹窗里不生效

layui 的 layer.open 默认是异步渲染 dom，即使你在 html 里写了 autofocus 属性，该元素在弹窗打开时往往还没被插入文档流，或者已被 form 模块重绘覆盖，导致浏览器忽略该属性。尤其当弹窗内容来自 dom 节点（如 content: $('#form-wrap')）或 iframe 时，autofocus 基本无效。

必须等 layer 渲染完成再调用 `focus()`

正确的时机不是页面加载完，也不是点击按钮瞬间，而是 layer 的 success 回调——它保证 DOM 已挂载、form 组件已初始化完毕。

务必在 success 函数内操作，不能放在 yes 或 end 里
如果用了 form.render()，要确保它已在 success 中执行过（否则 layui-input 类样式未就绪，focus() 可能失败）
推荐用原生 document.getElementById('xxx').focus()，比 jQuery 的 $('#xxx').focus() 更稳定（避免 jQuery 未就绪或选择器延迟）

示例：

layer.open({
  type: 1,
  content: $('#edit-form'),
  success: function(layero, index) {
    // 先刷新表单组件（关键！）
    form.render('input');
    // 再聚焦
    document.getElementById('username').focus();
  }
});

iframe 弹窗中自动对焦的特殊处理

当 type: 2（iframe 层）时，子页面和父页面是隔离环境，autofocus 仍可能失效，且父页 JS 无法直接访问子页 DOM。

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

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

下载

不要在父页尝试用 layero.find('iframe').contents().find('#xxx') —— 跨域时会报错，同域下也易因 iframe 加载时序出问题
正确做法：把聚焦逻辑写在子页面自身中，用 layui.use 包裹，并监听 DOMContentLoaded 或使用 setTimeout 微调时机
若子页也用了 form 模块，同样需先 form.render('input') 再 focus()

子页面脚本示例：

layui.use(['form'], function() {
  var form = layui.form;
  form.render('input');
  setTimeout(function() {
    document.getElementById('phone').focus();
  }, 100);
});