iOS Safari 解决点击空白处表单元素焦点不消失 bug
老牛浏览 585评论 0发表于
1. 问题说明
在 iOS Safari（iOS 14.6）浏览器上，点击 input 输入框后元素聚焦，然后点击其他空白地方聚焦不消失。
示例代码如下：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>App</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, shrink-to-fit=no">
</head>
<body>
<div>
<input type="text">
</div>
<div>
<input type="text">
</div>
</body>
</html>点击 input 输入框，弹出键盘，输入框获得焦点；然后点击页面空白处，焦点不消失（正常情况下应该失去焦点）。然而在安卓以及 iOS Chrome 浏览器上表现均正常。
2. 解决方法
添加如下 JavaScript 代码即可：
javascript
document.addEventListener("click", () => {}, true);现在，点击 input 输入框，弹出键盘，输入框获得焦点；然后点击页面空白处，收起键盘，焦点消失。
具体原因未知，迷之代码，该代码是从 Bootstrap 源码中分析出来的。
点赞
收藏
暂无评论，快来发表评论吧~
