点击屏幕时iphone键盘不会隐藏 [英] iphone keyboard not hiding when tapping the screen

问题描述

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

I have an input field with number type

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

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

In normal browsers, I'm typing some numbers and I'm tapping the screen, it hides iphone/ipad keyboard.

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

But this is not working if it is inside iframe. we need to click done button explicitly. This issue is only for iphone/ipad

这是一个iframe问题。任何使用Javascript / Jquery的修复都将受到高度赞赏。

This is an iframe issue. Any fix using Javascript/Jquery would be highly appreciated.

已更新

尝试过

 document.activeElement.blur();

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

and focusout when event triggered in javascript. none of them are working..

   $(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内调用！

focusout is not calling inside iframe!

我的问题是 **当输入元素没有使用Javascript / Jquery聚焦时，如何强制关闭ipad / iphone键盘？**

答案将按照规定给予奖励！

Answers will be rewarded as stated!

推荐答案

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

To remove the keyboard you need to lose the focus on your input.

document.activeElement.blur();

使用此行删除焦点，键盘消失。

With this line you remove the focus and the keyboard disappear.

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

In your case, it's possible to add an event on your body, and stop this event if you click on an input.

$(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"/>

更新

我发现这是回答将活动元素放入iframe。

I found this answer to get an active element into an 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。

With this function you can get the active element on the document or into an iframe.

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

After, you need to remove the focus on this element to hide the keyboard.

 getActiveElement().blur();

这篇关于点击屏幕时iphone键盘不会隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！