iPad/iPhone Safari中blur事件不触发问题求助

这个坑我之前踩过！iOS Safari对输入框的blur事件触发逻辑确实和其他浏览器不一样：当你从一个输入框直接点击另一个输入框时，第一个输入框的blur会被延迟到键盘收起（比如点「完成」）才触发，完全打乱了正常的表单交互逻辑。下面几个亲测有效的解决方案，你可以根据自己的场景选：

方案1：利用focusin事件主动触发blur #

当用户点击第二个输入框时，新输入框会触发focusin事件，这时候我们可以主动让之前聚焦的输入框触发blur：

// 给所有输入框绑定focusin事件
$('input').on('focusin', function() {
  // 找到当前聚焦的其他输入框，手动触发blur
  $('input:focus').not(this).blur();
});

这个方法逻辑简单，能覆盖大多数输入框切换的场景，而且不会影响其他浏览器的正常行为。

方案2：通过touchstart事件提前捕获点击行为 #

iOS上的触摸事件优先级很高，我们可以监听文档的touchstart，当用户点击非当前聚焦输入框的区域时，手动触发blur：

$(document).on('touchstart', function(e) {
  const focusedInput = $('input:focus');
  // 如果存在聚焦的输入框，且点击目标不是当前输入框
  if (focusedInput.length && !$(e.target).is(focusedInput)) {
    focusedInput.blur();
  }
});

这个方法更灵活，不仅能处理输入框之间的切换，还能处理用户点击页面其他区域时的blur触发。

方案3：针对iOS Safari做专属兼容 #

先检测当前环境是不是iOS Safari，再针对性处理：

// 判断是否为iOS Safari
function isiOSSafari() {
  return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream && /Safari/.test(navigator.userAgent);
}

if (isiOSSafari()) {
  $('input').on('focus', function() {
    const $currentInput = $(this);
    // 监听一次touchstart事件
    $(document).one('touchstart', function(e) {
      // 如果点击的不是当前输入框，触发blur
      if (!$(e.target).closest('input').is($currentInput)) {
        $currentInput.blur();
      }
    });
  });
}

这个方法更精准，只对iOS Safari生效，不会干扰其他浏览器的默认逻辑。

以上三种方法都能解决你遇到的问题，我个人更推荐方案1，代码量少且场景覆盖全面，你可以先试试这个！

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