Question

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

有没有办法强迫Safari中的键盘消失？从本质上讲，我有一种感觉，这个问题等同于问我如何强制输入框失去焦点或模糊。在线查看，我发现有很多示例可以检测模糊事件，但没有一个可以强制发生此事件。

Answer 1

更简单地说，你可以在当前聚焦的元素上调用blur（）。 $（ “＃inputWithFocus”）。模糊（）

Answer 2

document.activeElement.blur();

Answer 3

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

Answer 4

这是一个小代码片段，只要焦点在输入或textarea字段中并且用户点击该元素之外（桌面浏览器中的正常行为），它就会始终隐藏键盘。

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);

Answer 5

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

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

Answer 6

$('input:focus').blur();

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

Answer 7

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

目的回答上面的工作，但我认为它们并不完整，所以这是我的尝试，如果你登陆这个页面寻找我的同样的事情：

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();
  }
});

希望它有所帮助！

Answer 8

对于在AngularJs中使用赫斯基代码的人来说，这里是重写：

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();
  }
});

在iphone safari webapp中隐藏键盘

8 个答案: