在 iphone safari webapp 中隐藏键盘

Posted 2023-02-23

【中文标题】在 iphone safari webapp 中隐藏键盘

【英文标题】：hide keyboard in iphone safari webapp

【发布时间】：2011-02-22 19:55:09

【问题描述】：

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

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

【问题讨论】：

我喜欢你在六年后重新访问这个以偷走我的​​ 15 分。 :-p

【参考方案1】：

对于在 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();
  
);

【参考方案2】：

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

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

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

希望对你有帮助！

【参考方案3】：

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

【参考方案4】：

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

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

【参考方案5】：

document.activeElement.blur();

【参考方案6】：

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

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

【讨论】：

这是一个很好的答案，不幸的是其他两个使用纯JS的答案效率更高。

@Metagrapher 当然！我也确实犯了用 JQuery 回答非 jquery 问题的菜鸟错误；）

【参考方案7】：

这是一个小代码 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);

【讨论】：

太棒了，我可以想象这段奇妙的代码受到 web 应用程序和 phonegap 开发人员的极大追捧

这应该是答案。

【参考方案8】：

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

【讨论】：

最优雅！在 jQuery 中：$(this).blur()

【参考方案9】：

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

【讨论】：

谢谢！像魅力一样工作（在 mootools 中，只需 $('id-of-submit-button').focus()）

blur()、tap()、click()、focus() 在 ios 8+ 上无法解决这个问题

哦等等。我的问题不同。使用angularjs，页面过渡完成，并显示了一个新的框架。在新页面上，该命令无效，当返回原来导致 vkeyboard 的第 3 方 iframe 时，尽管没有调用文本输入，但键盘再次弹出。奇怪。

你是怎么解决这个@mojjj的？

@Metagrapher 该问题是由客户的登录 iframe 引起的，在文本输入软键盘回车后没有散焦。 hacky 解决方案是：创建一个隐藏的（例如屏幕外）文本输入元素，在屏幕过渡到下一个屏幕之前对其进行聚焦和模糊。