Question

我正在开发移动/网络应用程序。当我在移动浏览器中查看表单字段时，比如iPhone的safari甚至Chrome移动应用程序，除非我按下键盘上的其他表单元素或“完成”，否则我不能失去对表单字段的关注。

我甚至完全剥离了我的代码：

<!DOCTYPE html>
<html>
    <head>
       <title>Test</title>
    </head>
    <body>
        <form>
             <input type="text"/>
        </form>
    </body>
</html>

我仍然无法通过按其他地方来失去文本字段的焦点（在移动浏览器中）！

有人有什么想法吗？

Answer 1

尝试：

document.body.addEventListener("click", function(evt) {
  var nodeName = evt.target.nodeName.toLowerCase();
  if (nodeName !== "input" && nodeName !== "textarea" && nodeName !== "select") {
    document.activeElement.blur();
  }
});

Answer 2

我有同样的问题，我发现这个黑客工作

document.body.firstElementChild.tabIndex = 1

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

移动表单字段 - 失去焦点

2 个答案: