点击屏幕时iphone键盘不会隐藏

Question

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

<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?**

答案将按照规定予以奖励!

Answer 1

要卸下键盘，您需要将注意力集中在输入上。

document.activeElement.blur();

通过此行，您可以移开焦点，键盘消失。

就您而言，可以在您的身体上添加一个事件，如果您单击输入，则可以停止该事件。

document.activeElement.blur();

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

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

更新资料

我找到了这个答案，可以将活动元素添加到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();

Answer 2

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

• 使用 JavaScript

 document.activeElement.blur();

• 使用 jQuery

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