Javascript Safari IOS-输入不会在单击外部时失去焦点（模糊不会触发）

我不知道为什么当我在输入文本（黄色段落）外单击时，模糊事件不会触发。所以键盘无法关闭。我能触发它的唯一方法是单击主体（代码段中的蓝色部分）

我已经放置了许多console.log用于调试

更奇怪的是，当我删除事件点击文档时，点击主体就不再工作了

问题发生在Safari IOS上。我已经在iPhone6上进行了测试

有什么想法吗

谢谢你的帮助

文件
段落

$（文档）.ready（函数（）{
$（文档）。在（'单击'，函数（）上）{
console.log（'文档单击'）
});
$（“输入”）。单击（函数（事件）{
console.log（“输入点击”）；
});
$（'input'）.blur（函数（事件）{
log（'input blur'）；
});
$（'input'）.focusout（函数（事件）{
console.log（'input focustout'）
});
$（'body'）。在（'click'，函数（事件）{
log（'body click'）；
console.log（事件）；
});
});

我发现了一个黑客：

document.body.firstElementChild.tabIndex = 1

---

这使得主体中的第一个元素可聚焦，因此当您单击输入的“外部”时，它将失去焦点。同时，由于没有定义样式（除非您的第一个body子元素不是div），您不会在该聚焦元素上看到任何视觉故障。

调用

document.activeElement.blur()

在事件侦听器中，在

元素外部单击时触发。有很好的浏览器支持

您可能还希望在事件侦听器中检查预期的输入当前是否具有类似的焦点

if (document.activeElement.id === 'foo') document.activeElement.blur()

或

确保在输入字段外点击时不会随机模糊其他活动元素

更新 结果发现有一个更简单的解决方案。如果您点击输入元素外部，mouseleave事件也会在mobile Safari上触发。如果您使用React，它非常简单

e.target.blur（）}/>

否则，在普通JS中：

const input=document.getElementById（'input'））
input.addEventListener（'mouseleave'，e=>e.target.blur（））

---

可能会稍微安全一些（即一定是预期的输入元素），但我发现两者似乎都工作得很好。

很好的解决方案，还可以设置为“-1”，这样就不会影响键盘导航

if (document.activeElement.hasAttribute('bar')) document.activeElement.blur()