Question

我在iframe中有一个输入字段，所以当我点击任何输入字段时，它会被聚焦。但是如果我点击外面（身体区域），iphone键盘也不会关闭。每当我点击完成按钮显示时，它就会关闭。在iframe中只有iphone和ipad的问题。这将在所有浏览器中很好地工作。所以，我尝试过没有焦点，称为blur（）或document.activeelement。但他们都没有工作。

试过这个，焦点被触发但焦点不会被触发。

document.addEventListener("focusout", function(){
      document.activeElement.blur();
  });

对此有何解决方法？

sample.html

<!doctype html>
<html>
<head>
</head>
<body>
<iframe src="index2.html" width="100%" height="200px"></iframe>
</body>
</html>

index2.html

<!doctype html>
<html>
<head>
<style>
input:focus{
border: 2px solid red;
}
</style>
</head>
<body>
<br></br>
<input type="text" id="myText"/>
</body>
</html>

Answer 1

我不知道为什么blur()无法在iframe中运行，但它确实可以在没有iframe的情况下运行。

所以我做了几个测试，最后我找到了它们：

alert()简单提醒一下，它会关闭键盘。
focus()在非文本元素上，例如按钮。

这里我展示了如何使用focus()：

sample.html

<!doctype html>
<html>
<head>
</head>
<body>
<iframe src="index2.html" width="100%" height="200px"></iframe>
</body>
</html>
<script>
    document.getElementById("myframe").addEventListener("load",function()
        {
            document.getElementById("myframe").contentWindow.document.addEventListener("touchend",touchEnd, false);
        }, false
    );

    document.addEventListener("touchend",touchEnd, false);

    function touchEnd(event) {
       if(event.changedTouches[0].target.id != "mytext")
       {
            document.getElementById("myframe").contentWindow.document.getElementById("hidekeyboard").focus();
       }
    }
</script>

index2.html

<!doctype html>
<html>
<head>
<style>
input:focus{
border: 2px solid red;
}
</style>
</head>
<body>
<br></br>
<input type="text" id="myText"/>
<button type="button" id="hidekeyboard" style="width:0px; height:0px; opacity:0;"></button>
</body>
</html>

当输入元素没有使用JS聚焦时，如何强制关闭ipad / iphone键盘？

1 个答案: