iOS Safari中点击输入框外部无法失焦问题的HTML/JS解决方案

这个问题绝对是iOS Safari的经典坑之一了，我之前帮好几个开发者解决过类似的问题，给你几个靠谱的解决方案：

方法一：全局点击事件触发输入框失焦 #

给页面的body添加点击事件，判断点击区域不是目标输入框时，主动调用blur()方法让输入框失焦，这样键盘就会自动收起。代码示例如下：

// 获取目标输入框
const completeNameInput = document.getElementById('completeName');

// 给body绑定点击事件
document.body.addEventListener('click', function(e) {
  // 条件：输入框存在、点击的不是输入框本身、输入框正处于聚焦状态
  if (completeNameInput && e.target !== completeNameInput && completeNameInput === document.activeElement) {
    completeNameInput.blur();
  }
});

如果你的页面有多个输入框需要处理，可以把选择器改成document.querySelectorAll('input')，循环遍历每个输入框做判断：

document.body.addEventListener('click', function(e) {
  const inputs = document.querySelectorAll('input');
  inputs.forEach(input => {
    if (e.target !== input && input === document.activeElement) {
      input.blur();
    }
  });
});

方法二：使用touchstart事件提升iOS兼容性 #

有时候iOS Safari的click事件会有300ms延迟，或者在某些场景下不触发，这时候改用touchstart事件会更灵敏，记得加上passive: true来提升滚动性能：

const completeNameInput = document.getElementById('completeName');

document.body.addEventListener('touchstart', function(e) {
  if (completeNameInput && e.target !== completeNameInput && completeNameInput === document.activeElement) {
    completeNameInput.blur();
  }
}, { passive: true });

方法三：添加透明覆盖层（适合模态场景） #

如果你的输入框是在弹窗或模态框里，可以在模态框背景添加一个透明的覆盖层，点击覆盖层时触发输入框失焦：

<!-- 假设模态框结构 -->
<div class="modal-overlay" id="modalOverlay"></div>
<div class="modal-content">
  <input type="text" name="completeName" id="completeName" value="" maxlength="50">
</div>

const overlay = document.getElementById('modalOverlay');
const input = document.getElementById('completeName');

overlay.addEventListener('click', function() {
  if (input === document.activeElement) {
    input.blur();
  }
});

注意事项 #

• 不要在输入框的click或touchstart事件里阻止冒泡，否则会影响全局的判断逻辑；
• 如果输入框有自动补全或第三方插件，可能需要额外处理插件的聚焦状态，但核心逻辑还是调用blur()。

内容的提问来源于stack exchange，提问作者José Dantas