focus()函数无法识别已存在元素，求排查问题原因

以下是几种可能导致focus()失效的常见原因及排查方案：

• 元素不可见：即使DOM节点存在，若元素或其祖先节点被设置了display: none、visibility: hidden，或者处于视口外、被完全遮挡，focus()调用不会生效。可以通过检查元素的offsetParent属性判断：如果返回null，说明元素当前不可见。

• 元素被禁用：如果目标input带有disabled属性，浏览器会拒绝执行focus()。可以通过currentPopup.querySelector("input").disabled查看状态，若为true则需要先移除禁用属性。

• 渲染时机未到：console.log能输出元素不代表它已经完成渲染布局。可以把focus()放在requestAnimationFrame回调中，确保浏览器完成当前帧的渲染工作后再执行：

  requestAnimationFrame(() => {
    currentPopup.querySelector("input").focus();
  });
  

• 焦点被抢占：调用focus()后，可能有其他脚本、浏览器默认行为（如弹窗自动关闭逻辑）或其他元素的焦点事件抢走了焦点。可以在focus()之后立刻打印document.activeElement，确认当前焦点是否确实落在目标input上。

• tabindex属性异常：虽然input默认可聚焦，但如果被设置了tabindex="-1"（仅允许脚本聚焦，不过通常不影响focus()），或者tabindex被设置为无效值，也可能导致异常。可以检查元素的tabindex属性值确认。

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