如何通过纯JavaScript事件实现文本输入框自动聚焦？解决模拟点击失效问题

这个问题其实是现代浏览器的焦点安全限制在搞鬼——为了防止恶意网站自动聚焦输入框骚扰用户，浏览器会严格区分「可信事件」和「不可信事件」：

• 手动点击按钮属于可信事件（来自真实用户交互），这类事件触发的focus()操作会被浏览器正常允许；
• 而通过dispatchEvent或btn.click()模拟的点击属于不可信事件（纯脚本触发，无用户参与），浏览器会拦截这类事件触发的焦点变更操作。

为什么会有这个限制？ #

试想一下，如果任何脚本都能随意把焦点拉到输入框，你浏览网页时会不断被突兀的输入框打断体验，浏览器的这个机制就是为了避免这种恶意骚扰。

可行的解决方案 #

因为你无法控制HTML代码，我们只能从脚本层面找变通方法：

方案1：利用用户首次交互标记

只要用户有过一次真实交互（比如点击页面任意位置），后续脚本触发的焦点操作就会被允许。我们可以先监听用户的首次交互，再执行模拟操作：

let hasUserInteracted = false;

// 监听用户第一次点击页面，标记交互状态（只执行一次）
document.addEventListener('click', () => {
  hasUserInteracted = true;
}, { once: true });

const input = document.querySelector("input");
const btn = document.querySelector("#btn");

btn.addEventListener("click", () => {
    console.log("click");
    input.focus();
});

setTimeout(() => {
    if (hasUserInteracted) {
        // 用户已交互，模拟点击可以正常生效
        btn.click();
    } else {
        // 无用户交互时，尝试非标准的force参数（仅Chrome等部分浏览器支持）
        input.focus({ force: true });
    }
}, 1000);

方案2：在用户交互上下文执行脚本

如果你的脚本是在某个用户交互的回调里触发的（比如用户点击了页面上的其他元素），那直接调用input.focus()或者模拟按钮点击都会生效——因为此时脚本运行在可信的用户交互上下文里。

注意事项 #

如果完全没有任何用户交互（比如页面加载后用户什么都没点），浏览器的安全限制是无法绕过的，这是浏览器的强制保护机制，没有通用的解决办法。

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