Question

我不知道为什么当我在输入文本外部点击时会触发模糊事件（在黄色的段落上）。所以键盘不能关闭。我可以触发它的唯一方法是当我点击身体时（在片段中以蓝色显示）。

我已经安装了很多console.log进行调试。

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

Safari IOS出现问题。我已经在Iphone 6上测试了。

有什么想法吗？

感谢您的帮助

＆＃13;

<!DOCTYPE html>
<html lang="en" style="height:200px; background:blue">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</head>

<body style="height:200px; background:gray">

    <form action=""  style="background:purple">
      <input type="text" name="test" id="test">
    </form>
    <p  style="height:50px; background:yellow" >Paragraph</p>
    <script>
        $(document).ready(function() {

            $(document).on('click', function() {
                console.log('document click')
            });

            $('input').click(function(event) {
                console.log("input click");
            });

            $('input').blur(function(event) {
                console.log('input blur');
            });

            $('input').focusout(function(event) {
                console.log('input focustout')
            });

            $('body').on('click', function(event) {
                console.log('body click');
                console.log(event);
            });

        });
    </script>
</body>

</html>

＆＃13;

Answer 1

我找到了一个黑客：

document.body.firstElementChild.tabIndex = 1

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

Answer 2

一种不太麻烦的解决方案是打电话

document.activeElement.blur()

在事件监听器中

触发<input />元素外部的点击。 activeElement具有强大的浏览器支持。

您可能还想检查事件侦听器中的预期输入当前具有焦点，例如

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

或

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

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

更新

结果是有一个更简单的解决方案。如果您在输入元素之外点击，则mouseleave事件也会在移动Safari上触发。如果您使用的是React，那么就像

<input onMouseLeave={e => e.target.blur()} />

否则，使用纯JS：

const input = document.getElementById('input')
input.addEventListener('mouseleave', e => e.target.blur())

currentTarget可能会更安全一些（即可以肯定是预期的输入元素），但我发现两者似乎都可以正常工作。

Safari IOS - 输入不会失去对外点击的重点（模糊不要触发）

2 个答案:

更新