如何用Intersection Observer API移除视口外聚焦表单元素焦点（兼容iOS Safari）

我来帮你搞定这个问题！下面是完整的实现方案，专门针对iOS Safari做了兼容性处理，同时利用Intersection Observer API高效监测元素可见性：

完整代码实现 #

<!DOCTYPE html>
<html>
<head>
  <style>
    html { height: 100% }
    html, body, main, section { display: flex; flex-grow: 1 }
    main { flex-direction: column }
    section { justify-content: center; align-items: center; flex: 1 0 100% }
  </style>
</head>
<body>
<main>
  <section>
    <form action=submit method=post>
      <fieldset>
        <legend>Enter Your Details</legend>
        <label>Email<br><input type=email name=email placeholder=jane@example.com></label><hr>
        <label>Message<br><textarea name=briefing placeholder="Lorem ipsum dolor sit amet."></textarea></label><hr>
        <input type=submit value=Submit>
      </fieldset>
    </form>
  </section>
  <section>
    <h2>Second Page</h2>
  </section>
</main>
<script>
document.addEventListener("DOMContentLoaded", () => {
  // 初始化Intersection Observer，配置兼容iOS Safari的参数
  const visibilityObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      // 仅当元素完全移出视口，且当前处于聚焦状态时执行失焦操作
      if (!entry.isIntersecting && entry.target === document.activeElement) {
        entry.target.blur();
        // 停止监听该元素，避免重复触发
        visibilityObserver.unobserve(entry.target);
      }
    });
  }, {
    threshold: 0, // 元素可见比例为0时触发（完全移出视口）
    root: document.body // 兼容iOS：用body作为根元素，提升可见性判断准确性
  });

  // 给所有输入框和文本域绑定聚焦/失焦事件
  const interactiveInputs = document.querySelectorAll('input, textarea');
  interactiveInputs.forEach(input => {
    input.addEventListener('focus', () => {
      // 输入框获得焦点后，开始监测其可见性
      visibilityObserver.observe(input);
    });

    input.addEventListener('blur', () => {
      // 输入框失焦后，停止监测，节省性能
      visibilityObserver.unobserve(input);
    });
  });
});
</script>
</body>
</html>

关键细节说明 #

• Intersection Observer核心逻辑：

  • threshold: 0确保当元素完全移出视口（可见比例为0）时触发回调，精准捕捉“移出视口”的场景。
  • root: document.body是iOS Safari的关键兼容点——iOS上默认视口计算可能因键盘弹出、滚动行为出现偏差，用body作为根元素能更准确判断元素是否在用户可见区域内。

• 性能优化：

  • 仅在输入框获得焦点时才启动监听，避免对所有元素持续监测造成的性能浪费。
  • 输入框失焦后立即停止监听，减少不必要的回调触发。

• iOS Safari特殊处理：

  • 直接调用blur()方法在iOS上是可靠的，能正确收起键盘并移除输入框焦点。
  • Intersection Observer会自动处理iOS上键盘弹出/收起时的视口变化，无需额外监听resize或scroll事件。

测试场景验证 #

1. 点击输入框使其获得焦点（iOS上会弹出键盘）。
2. 滚动页面让该输入框完全移出屏幕。
3. 此时输入框会自动失焦，键盘也会随之收起，符合预期效果。

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