点击屏幕时iphone键盘不隐藏答案

【问题标题】：iphone keyboard not hiding when tapping the screen点击屏幕时iphone键盘不隐藏
【发布时间】：2015-05-05 09:33:41
【问题描述】：

我有一个数字类型的输入字段

<input type="number" pattern="[0-9]*"/>

在普通浏览器中，我输入一些数字并点击屏幕，它会隐藏 iphone/ipad 键盘。

但如果它在 iframe 内，则此方法不起作用。我们需要明确地点击完成按钮。 此问题仅适用于 iphone/ipad

这是一个 iframe 问题。任何使用 Javascript/Jquery 的修复将不胜感激。

更新

试过了

 document.activeElement.blur();

当事件在 javascript 中触发时聚焦。他们都没有工作..

   $(document).on('focusin', function(){
     $('input').css("background-color", "green");
      console.log('focusin!')
     });

  $(document).on('focusout', function(){
      console.log('focusout!')
     $('input').css("background-color", "yellow");
      $('input').blur();
     });

focusout 不在 iframe 内调用！

我的问题是**How to force close ipad/iphone keypad when input element is not focused using Javascript/Jquery?**

答案将按规定奖励！

【问题讨论】：

我写了一个小插件，主要用于处理键盘。它还支持在单击文档时隐藏键盘 - 不包括不应触发隐藏键盘的表单组件。从这里检查代码 (L:70 - L:92)：github.com/zvona/Servant.js/blob/master/Servant.js
会检查并告诉你..

标签： javascript jquery ios iphone iframe

【解决方案1】：

html目标<input>和<textarea>，iphone和ipad在点击空白区域时不会隐藏键盘；但是android会！我们需要手动隐藏键盘——这意味着设置输入模糊；

这里是代码

$(function(){

    var cacheInput = null;
    var timer = null;
    if(!isApple()){
        return false;
    }
    $(document).on('focus','input',function(e){
        cacheInput = e.target;
    })
    $(document).on('focus','textarea',function(e){
        cacheInput = e.target;
    })
    $(document).on('touchend',function(e){
        if(e.target.tagName!=='INPUT'&&e.target.tagName!=='TEXTAREA'){
            if(cacheInput!==null){
                timer = setTimeout(function(){
                    cacheInput.blur();
                    clearTimeout(timer);
                },300)
            }
        }
    })
    function isApple(){
        var ua = navigator.userAgent.toUpperCase();
        var 
          ipad = ua.indexOf('IPAD')>-1,
          ipod = ua.indexOf('IPOD')>-1,
          iphone = ua.indexOf('IPHONE')>-1 ;
        return   ipad || ipod || iphone ;
    }
})

github：https://github.com/wikieswan/iphone-input-blur

演示：http://wikieswan.github.io/iphone-input-blur

【讨论】：

演示链接已损坏；但这对我来说似乎也是如此。适用于android但不适用于iphone。所以这只是跟踪输入/文本区域触摸，然后当在任何其他元素上调用任何触摸结束事件时，您知道焦点应该从该输入移开。此处使用的 jQuery 非常好 :) 是否有任何官方文档支持 input/textarea blur 不起作用？

【解决方案2】：

要移除键盘，您需要失去对输入的关注。

document.activeElement.blur();

通过这一行，您可以移除焦点，键盘也会消失。

在您的情况下，可以在您的身体上添加一个事件，并在您单击输入时停止此事件。

$(document).ready(function () {
  $('body').click(function () {
    document.activeElement.blur();
    console.log("blur");
  });

  $('input').click(function (event) {
    event.stopPropagation();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text"/>

更新

我发现这个answer 将一个活动元素放入 iframe。

/**
 * Return the active element in the main web or iframes
 * @return HTMLElement
 **/
function getActiveElement() {
  var focused = false;

  // Check if the active element is in the main web or no
  if (document.body === document.activeElement ||
    document.activeElement instanceof HTMLIFrameElement) {

    // Search in iframes
    $('iframe').each(function() {
      var element = this.contentWindow.document.activeElement;
      // If there is a active element
      if (element !== this.contentWindow.document.body) {
        focused = element;
        return false; // Stop searching
      }
    });

  } else focused = document.activeElement;

  return focused; // Return element
}

使用此函数，您可以获取文档上的活动元素或 iframe。

之后，您需要移除该元素上的焦点以隐藏键盘。

 getActiveElement().blur();

【讨论】：

我试过你的代码，当我点击输入框时，它消失了键盘并且无法聚焦
您的输入是 iframe 吗？
在 iframe 中，我正在调用服务器中的 html... 在 index.html 中，我有输入类型
你在 index.html 或父页面中的 js 代码过去了吗？

【解决方案3】：

在一个离子应用程序中，我在主体上使用了一个指令来拦截输入。

MyApp.directive('dismissIosKeyboardOnClick', function () {
        return function (scope, element, attrs) {
          if (cordova.platformId=="ios") {
            element.on("touchstart", function(e) {
              var keyboardDoms = new Set(["INPUT","TEXTAREA","SELECT"]);
              if( keyboardDoms.has(document.activeElement.nodeName) &&
                  !keyboardDoms.has(e.target.nodeName) )
                document.activeElement.blur();
              });
            }
        };
      });

索引.html

<body ... dismiss-ios-keyboard-on-click></body>

【讨论】：

【解决方案4】：

希望这能解决您的问题，它只是消除了对活动元素的关注。

使用 Javascript

 document.activeElement.blur();

使用 jQuery

 $("#Clicked_button_id").click(function() {
    $("#input_field_id").blur();                               
});

【讨论】：

这不起作用兄弟..当我点击输入类型时，它会在输入任何值之前关闭键盘
见 ..jsfiddle.net/yaq3j9b9 这是正在发生的事情..点击时失去焦点

【解决方案5】：

试试这个。这会检测您何时选择除输入之外的任何元素，然后对其进行模糊处理。

$("html").children().not("#input_field_id").click(function(){
  $("#input_field_id").blur();
});

【讨论】：

【解决方案6】：

我可能会为您在 iOS 上的问题提供解决方案。我的配置是 iOS 8.3/5C 上的 safari。

根据我的实验，在我看来，Safari/iOS 中的 body 元素不接受任何点击事件。我无法解释原因，但似乎如此。

所以，我所做的是：在 body 中放置一个包装 div 并让它接收点击。

Main.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>keyboard hide issue</title>
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
    $(document).ready(function() {
        //!SOLUTION
        $('#body-wrapper').click(function(e) {
            console.log('I got clicked');
        });        
    });
</script>
<style>
/* ignore this. Its just styles. ... */
div#body-wrapper {
    height: 200px;
    width: 100%;
    background-color: red;
}
input {
    margin: 10px;
}

</style>
</head>
<body>
    <div id="body-wrapper">
        <input type="text" id="main-input1"/>
        <input type="number" id="main-input2"/>
        <input type="email" id="main-input3"/>
    </div>
    <iframe src="blur.html"></iframe>
</body>
</html>

blur.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Blur iFrame</title>
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {   
        //!SOLUTION
        $('#wrapper').click(function(e) {
            //do nothing 
        });        
    });
</script>
<style>
/* ignore this. Its just styles. ... */
div#wrapper {
    height: 100px;
    width: 100%;
    background-color: yellow;
}
</style>
</head>
<body>
    <div id="wrapper">
        <input type="number" pattern="[0-9]*" id="main-input"/>
    </div>
    </body>
</html>

在这两个文件中，我都可以很好地隐藏键盘。同样，我不知道根本原因，但如果您无法复制解决方案，请告诉我。

我还没有在 iPad 上尝试过。谢谢...

【讨论】：

不起作用..这似乎是 iframe 问题，无法修复。通过阅读 charcode 得到修复并做了一些修改

【解决方案7】：

嗯...你可以给我奖励，因为我刚刚使用非常简单解决方案解决了这个问题。

第 1 步 ：检查输入当前是否处于焦点。稍后我会解释为什么我们需要在更改 inputFocused 变量的值时添加延迟。

var inputFocused = false;
$('input').focus(function(){
        setTimeout(function(){
            inputFocused = true;
        },100);
    });

第 2 步：如果点击或点击屏幕或$(window)，则添加事件侦听器。如果窗口被点击或单击，请检查输入当前是否处于焦点。如果true你必须聚焦窗口$(window).focus()，聚焦窗口后，blur()函数现在可以工作了！因此您现在可以取消输入元素的焦点，然后键盘现在将自动隐藏，然后再次将 inputFocused 变量设置为 false。

$(window).click(function(){
    if(inputFocused == true){
        $(window).focus();
        var input = $('input');
        input.blur();
        inputFocused = false;
    }
});`

SetTimeout 解释： 如果用户点击或单击屏幕上的任意位置（例如按钮点击、输入点击、点击或点击屏幕等），$(window).click() 事件将触发。如果你点击输入，同时将inputFocused设置为true，$(window).click()事件触发然后检查inputFocused是否为true然后运行隐藏虚拟键盘的代码。因此，这意味着每当您关注输入字段时，键盘都会隐藏，这将是一个问题。

这就是我们添加延迟的原因，以便if(inputFocused == true) 中的代码在我们聚焦输入字段时不会运行，并且它只会在输入字段当前聚焦时运行。

经过测试！

【讨论】：