modal prompt模态提示示例中input元素的focus聚焦应在哪里设置？

问题根因 #

你写的focus代码不生效，核心原因是调用focus方法时，模态框的input元素还未真正挂载到DOM树，或者模态框还处于不可见状态（比如还在执行入场动画、display属性仍为none），此时针对元素的focus操作会被浏览器忽略。

正确的设置方案 #

• 方案1：使用setTimeout将focus操作延迟到下一个事件循环执行，等当前DOM渲染任务完成后再触发聚焦，代码示例：

// 写在你触发模态框显示的代码之后即可
setTimeout(() => {
  document.getElementById("prompt_value1").focus();
}, 0);

• 方案2：如果你的模态框组件提供了显示完成的回调钩子（比如onShow/onShown类的回调配置），直接将focus代码写在该回调函数内即可，这是最稳定的方案，不受模态框入场动画时长影响。
• 方案3：如果模态框自身设置了tabindex="-1"属性会抢占焦点，可以先取消模态框的焦点再给input聚焦：

const modalEl = document.querySelector('.modal'); // 替换为你的模态框元素选择器
const inputEl = document.getElementById("prompt_value1");
modalEl.blur();
inputEl.focus();

内容的提问来源于stack exchange，提问作者smolo