如何防止Google One Tap抢占input输入框的焦点？

临时解决方案 #

这里有几个可行的办法避开焦点被夺走的问题：

• 延迟设置输入框焦点
  不要在页面加载完成后立刻调用focus()，而是等Google One Tap完成初始化后再执行。可以用定时器或者监听One Tap的提示事件：

  // 方法1：用定时器延迟执行
  setTimeout(() => {
    document.getElementById('target-input').focus();
  }, 1000);
  
  // 方法2：监听One Tap提示框显示事件后再设置
  google.accounts.id.initialize({
    client_id: '你的客户端ID',
    callback: handleCredentialResponse
  });
  
  google.accounts.id.prompt((notification) => {
    if (notification.isDisplayed()) {
      setTimeout(() => {
        document.getElementById('target-input').focus();
      }, 300);
    }
  });
  

• 动态添加autofocus属性
  不在HTML里直接写autofocus，等One Tap脚本加载完成后再给输入框加上这个属性：

  window.addEventListener('load', () => {
    const checkOneTap = setInterval(() => {
      if (typeof google !== 'undefined' && google.accounts?.id) {
        clearInterval(checkOneTap);
        document.getElementById('target-input').setAttribute('autofocus', '');
      }
    }, 200);
  });
  

• 禁用One Tap自动提示，手动触发
  如果业务允许，可以关闭One Tap的自动弹出，改成用户主动点击按钮时才触发登录窗口：

  google.accounts.id.initialize({
    client_id: '你的客户端ID',
    callback: handleCredentialResponse,
    auto_select: false,
    cancel_on_tap_outside: false
  });
  
  // 绑定按钮点击事件触发One Tap
  document.getElementById('login-trigger-btn').addEventListener('click', () => {
    google.accounts.id.prompt();
  });
  

Bug上报方法 #

如果要把这个问题反馈给Google，可以走这两个渠道：

• 登录Google Cloud Console，找到对应的项目，进入「API和服务」板块，提交Bug反馈。要把问题场景（带autofocus的输入框/页面加载时调用focus()，One Tap夺走焦点）、复现步骤、测试环境（浏览器版本、One Tap版本）描述清楚。
• 访问Google Identity Platform官方文档页面，在底部找到「发送反馈」入口，详细提交问题细节。

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