Input与Button焦点互切异常及跨浏览器兼容问题求助

核心问题1：点击Canvas等不可聚焦元素时，按钮未获取焦点 #

当点击Canvas这类默认不可聚焦的元素时，浏览器会将焦点转移到document.body或全局窗口对象，此时Input的blur事件虽会触发，但同步调用按钮的focus()方法可能被浏览器的焦点处理流程覆盖，导致按钮无法获得焦点。

核心问题2：Tab键离开第二个Input时，浏览器表现不一致 #

不同浏览器对blur事件中同步修改焦点的处理逻辑存在差异：Firefox会优先执行blur事件内的focus()操作，而Chrome/Opera则优先遵循默认Tab导航顺序，忽略同步的焦点设置，导致按钮无法获得焦点。

统一解决方案 #

使用setTimeout异步触发按钮的focus()操作，确保在浏览器完成当前焦点切换流程后再执行焦点设置，能在所有场景（点击Canvas、Tab导航）下实现一致效果。同时将内联事件改为外部绑定，提升代码可维护性：

<body>
  <button id="b1">1</button>
  <input id="i1" type="text"/>
  <button id="b2">2</button>
  <input id="i2" type="text"/>
  <!-- 示例Canvas -->
  <canvas width="200" height="100" style="border:1px solid #000;"></canvas>

  <script>
    // 绑定按钮点击事件：让对应Input获取焦点
    document.getElementById('b1').addEventListener('click', () => {
      document.getElementById('i1').focus();
    });
    document.getElementById('b2').addEventListener('click', () => {
      document.getElementById('i2').focus();
    });

    // 绑定Input失焦事件：异步让对应按钮获取焦点
    document.getElementById('i1').addEventListener('blur', () => {
      setTimeout(() => {
        document.getElementById('b1').focus();
      }, 0);
    });
    document.getElementById('i2').addEventListener('blur', () => {
      setTimeout(() => {
        document.getElementById('b2').focus();
      }, 0);
    });
  </script>
</body>

原理说明 #

• 异步执行focus()：setTimeout(fn, 0)会将焦点设置操作放入浏览器任务队列，等待当前焦点处理流程（如点击Canvas后的焦点转移、Tab导航的默认焦点切换）完成后再执行，避免被浏览器默认行为覆盖。
• 跨浏览器一致性：这种方式能绕过不同浏览器对同步焦点修改的差异处理，确保所有场景下按钮都能正确获取焦点。

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