32

我正在为 iPhone 创建一个基于 HTML/CSS/JS 的 webapp。我正在使用表单来接收输入并将数据传递给脚本，但我遇到的一个问题是键盘不会消失。用户将输入信息，点击提交，由于它是 JavaScript，页面不会重新加载。键盘保持在原位，这很麻烦，并为用户增加了另一个步骤（必须关闭它）。

有什么办法可以强制 Safari 中的键盘消失？本质上，我觉得这个问题相当于问我如何强制输入框失去焦点或模糊。在网上看，我找到了很多检测模糊事件的例子，但没有一个例子可以强制这个事件发生。

4

9 回答 9

44

更简单地说，您可以在当前聚焦的元素上调用 blur()。$("#inputWithFocus").blur()

于 2012-02-01T21:37:55.820 回答
43 
document.activeElement.blur();
于 2012-09-06T05:45:22.000 回答
28

您可以尝试focus()使用非文本元素，例如提交按钮。

于 2010-05-23T00:09:41.483 回答
19

Here's a small code snippet that always hides the keyboard whenever the focus is in an input or textarea field and the user taps outside of that element (the normal behaviour in desktop browsers).

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);
于 2012-03-30T12:13:20.423 回答
3

要检测何时按下返回按钮，请使用：

$('input').bind('keypress', function(e) { if(e.which === 13) { document.activeElement.blur(); } });

于 2015-01-22T10:47:11.957 回答
3

我遇到了这个问题，并花了一些时间才得到满意的解决方案。我的问题与原始问题略有不同，因为我想在点击外部输入元素区域时关闭输入事件。

上面的有目的的答案有效，但我认为它们并不完整，所以这是我的尝试，以防您登陆此页面寻找与我相同的东西：

jQuery解决方案

我们将事件侦听器附加touchstart到整个文档。当屏幕被触摸时（不管是点击、按住还是滚动），它将触发处理程序，然后我们将检查：

  1. 触摸区域是否代表输入？
  2. 输入是否集中？

鉴于这两个条件，我们然后触发一个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();
  }
});

希望能帮助到你！

于 2015-11-20T01:15:28.093 回答
2 
$('input:focus').blur();

使用焦点元素的 CSS 属性，这会模糊当前具有焦点的任何输入，从而移除键盘。

于 2012-08-15T16:20:19.280 回答
1

请务必在 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

于 2015-08-25T06:42:11.403 回答
0

对于在 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();
  }
});
于 2017-02-02T17:33:23.113 回答