iPad Safari - 让键盘消失答案

【问题标题】：iPad Safari - Make keyboard disappeariPad Safari - 让键盘消失
【发布时间】：2011-08-21 16:40:37
【问题描述】：

在 iPad Safari 浏览器中，当我将焦点从文本框更改为下拉菜单时，键盘仍然存在...有什么方法（可能使用 Javascript）可以在用户从文本框模糊时隐藏键盘吗？

间接地说，我正在寻找（但在 Mobile Safari 中）的等价物

[tempTextField resignFirstResponder];

【问题讨论】：

标签： ios ipad mobile-safari

【解决方案1】：

我在http://uihacker.blogspot.com/2011/10/javascript-hide-ios-soft-keyboard.html 找到了解决方案。本质上，只需这样做（它对我有用）：

var hideKeyboard = function() {
    document.activeElement.blur();
    $("input").blur();
};

【讨论】：

此解决方案不适用于移动 chrome。重复。不工作。
为什么要同时模糊document.activeElement.blur(); 和所有输入？对我来说，这仅适用于 document.activeElement.blur();
没有 jQuery：for (const input of document.getElementsByTagName("input")) input.blur()
我在 iframe 中的输入遇到了这个问题，所以我无法选择要模糊它的元素。相反，我必须在父页面上创建一个虚拟文本框，强制聚焦，然后模糊它以隐藏键盘。

【解决方案2】：

在我的网站上成功登录后，我的 iPad 与 iOS 5.0.1 没有隐藏键盘。我通过简单地执行javascript命令解决了

document.activeElement.blur();

成功登录后，现在键盘已正确隐藏:-)

【讨论】：

【解决方案3】：

我知道这是一个稍微老一点的问题，但我今天发现了这个问题的答案，而且答案非常简单……我花了比我愿意承认的时间更多的时间来解决这个问题；）

为了防止显示键盘：

<input type="text" name="someInput" />

当你想做一些事情时，比如使用 jQuery UI 日期选择器......

像这样添加一个 readonly 属性：

<input type="text" name="someInput" readonly="readonly" />

如果您想注意那些关闭了 JS 的人，您可以随时取消该属性并将其添加到您的代码中：

$('[name=someInput]').attr('readonly','readonly');

希望这会有所帮助。

这是一个演示该概念的 jsFiddle：http://jsfiddle.net/3QLBz/5/

【讨论】：

这会阻止上一个/下一个选项正常工作。日期选择器未初始化，因为它的制表位被忽略。

【解决方案4】：

$("#txt").on("focus", function(){
    $(this).blur();
});

适用于 iPad 上的 jquery UI datepicker

【讨论】：

谢谢@zenon，这很好！

【解决方案5】：

当输入失去焦点时，iPad、iPhone 键盘本来应该会消失。

我发现在移动/平板设备上
Safari 仅处理具有 cursor:pointer 的元素的点击事件属性。

我终于在手机/平板设备的正文标签上添加了cursor:pointer，它就像一个魅力。

小样本

body {
  @media (max-width: 1024px) { /* IPad breakpoint */
    cursor: pointer; /* Fix iPhone/iPad click issue */
  }
}

【讨论】：

【解决方案6】：

我在另一个文本字段上调用 .focus() 并且键盘消失了。我正在使用 Sencha 触摸框架，我所指的文本字段是一个 Ext.Text 对象。

我知道这是违反直觉的，但它似乎对我有用

【讨论】：

这似乎违反直觉好吧...当您专注于任何文本字段时不应该显示屏幕键盘吗？

【解决方案7】：

不带 jQuery 的版本：

function hideKeyboard () {
    document.activeElement.blur();
    Array.prototype.forEach.call(document.querySelectorAll('input, textarea'), function(it) { 
        it.blur(); 
    });
}

【讨论】：

【解决方案8】：

Sample.views.MessageBar.getComponent(0).blur();
document.activeElement.blur();
window.focus();
Sample.views.sendMessageBar.getComponent(0).setDisabled(true);

您可以使用上面的代码。第一行和第四行用于该文本字段。它适用于iphone，但不适用于Android。我试过 Iphone 3gs 和三星 Galaxy s2。

【讨论】：

【解决方案9】：

根据 Apple Safari 文档，当您选择下拉列表（选择列表）时，iOS 会关闭键盘并显示原生 iOS 选择控件。确保您在下拉列表中使用 SELECT 元素

并尝试将其添加到页面的元标记中

<meta name="apple-mobile-web-app-capable" content="yes" />

【讨论】：