我正在为 iPhone 创建一个基于 HTML/CSS/JS 的 webapp。我正在使用表单来接收输入并将数据传递给脚本，但我遇到的一个问题是键盘不会消失。用户将输入信息，点击提交，由于它是 JavaScript，页面不会重新加载。键盘保持在原位，这很麻烦，并且为用户增加了另一个步骤（必须关闭它）。
有什么方法可以强制 Safari 中的键盘消失？本质上，我觉得这个问题相当于问我如何强制输入框失去焦点或模糊。在网上看，我找到很多例子来检测模糊事件，但没有一个可以强制这个事件发生。
【问题讨论】：
标签： iphone keyboard web-applications blur
对于在 AngularJs 中使用 Husky 代码的任何人，这里是重写：
function isTextInput(node) {
return ['INPUT', 'TEXTAREA'].indexOf(node.nodeName) !== -1;
}
angular.element($document[0]).on('touchstart', function(e) {
var activeElement = angular.element($document[0].activeElement)[0];
if(!isTextInput(e.target) && isTextInput(activeElement)) {
activeElement.blur();
}
});
【讨论】：
我遇到了这个问题，并花了一些时间才得到满意的解决方案。我的问题与原始问题略有不同，因为我想在点击外部输入元素区域时关闭输入事件。
上述有目的的答案有效，但我认为它们并不完整，所以这是我的尝试，以防你登陆此页面寻找与我相同的东西：
jQuery 解决方案
我们将touchstart 事件侦听器附加到整个文档。当屏幕被触摸时（无论是点击、按住还是滚动）都会触发处理程序，然后我们将检查：
鉴于这两个条件，我们然后触发blur() 事件以从输入中移除焦点。
ps：我有点懒所以只是从上面的响应中复制了这一行，但是如果你想保持代码的一致性，你可以使用 jQuery 选择器来获取文档
$(document).on('touchstart', function (e) {
if (!$(e.target).is('.my-input') && $('.my-input').is(':focus')) {
document.activeElement.blur();
}
});
Hammer.JS 解决方案
您也可以使用Hammer.JS 来处理您的触摸手势。假设您想在 tap 事件上关闭它，但如果用户只是滚动页面，则键盘应该在那里（或者说，按住文本选择，以便他可以复制并粘贴到您的输入区域）
在这种情况下，解决方案是：
var hammer = new Hammer(document.body);
hammer.on('tap', function(e) {
if (!$(e.target).is('.search-input') && $('.search-input').is(':focus')) {
document.activeElement.blur();
}
});
希望对你有帮助！
【讨论】：
请务必在 CSS 中设置：
body {
cursor: pointer;
}
否则，您调用document.activeElement.blur() 的事件处理程序将永远不会被触发。欲了解更多信息，请参阅：http://www.shdon.com/blog/2013/06/07/why-your-click-events-don-t-work-on-mobile-safari
【讨论】：
要检测何时按下返回按钮，请使用：
$('input').bind('keypress', function(e) {
if(e.which === 13) {
document.activeElement.blur();
}
});
【讨论】：
document.activeElement.blur();
【讨论】：
$('input:focus').blur();
对焦点元素使用 CSS 属性，这会模糊当前具有焦点的任何输入，移除键盘。
【讨论】：
这是一个小代码 sn-p，只要焦点位于输入或文本区域字段中并且用户在该元素之外点击（桌面浏览器中的正常行为），它总是隐藏键盘。
function isTextInput(node) {
return ['INPUT', 'TEXTAREA'].indexOf(node.nodeName) !== -1;
}
document.addEventListener('touchstart', function(e) {
if (!isTextInput(e.target) && isTextInput(document.activeElement)) {
document.activeElement.blur();
}
}, false);
【讨论】：
更简单的是，您可以在当前聚焦的元素上调用 blur()。 $("#inputWithFocus").blur()
【讨论】：
您可以在非文本元素上尝试focus()ing，例如提交按钮。
【讨论】：