javascript iphone键盘在点击屏幕时不隐藏

Question

提问by UI_Dev

I have an input field with number type

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

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

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

在普通浏览器中，我正在输入一些数字并点击屏幕，它隐藏了 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 内，这将不起作用。我们需要明确点击完成按钮。此问题仅适用于 iphone/ipad

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

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

Updated

更新

Tried

试过

 document.activeElement.blur();

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

并在 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 is not calling inside iframe!

focusout 不在 iframe 内调用！

My question is **How to force close ipad/iphone keypad when input element is not focused using Javascript/Jquery?**

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

Answers will be rewarded as stated!

回答者将按规定给予奖励！

Answer 1

回答by R3tep

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

Update

更新

I found this answerto get an active element into an iframe.

我找到了这个答案，可以将活动元素放入 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
}

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

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

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

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

 getActiveElement().blur();

Answer 2

回答by wikieswan

html target <input>and <textarea>, iphone and ipad will not hide keyboard when taping on blank area ;but android will! we need to hide keyboard by hand -- it means to set the input blur;

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

here gose the code

这是代码

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

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

demo: http://wikieswan.github.io/iphone-input-blur

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

Answer 3

回答by jrobichaud

In an ionic application I used a directive on the body that intercepts the inputs.

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

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

Index.html

索引.html

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

Answer 4

回答by Mumthezir VP

Hope this'll solve your issue, it simply removes the focus on active element.

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

Using Javascript

使用 JavaScript

 document.activeElement.blur();

 document.activeElement.blur();

Using jQuery

使用 jQuery

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

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

Answer 5

回答by James McDowell

Try this. This detects when you tab any element but the input and then blurs it.

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

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

Answer 6

回答by tyskr

I might possibly have a solution for your issue on iOS. My configuration is safari on iOS 8.3/5C.

对于您在 iOS 上的问题，我可能有解决方案。我的配置是 iOS 8.3/5C 上的 safari。

From my experiments it seems to me that body element in Safari/iOS is not receptive to any click events. I am not able to explain why but it seems so.

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

So, what I have done is: put a wrapper div just inside body and allow it to receive the click.

所以，我所做的是：在 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

模糊.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>

In both files I am able to hide the keyboard just fine. Again, I don't know the underlying reason but do let me know if you aren't able to replicate the solution.

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

I have not tried it on an iPad. Thanks ...

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

Answer 7

回答by Vashtamyty

Well... You can give me that reward cause I just solved this problem using a very SIMPLEsolution.

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

Step 1: Check if the input is currently in focus. I'll explain later why we need to add a delay on changing the value of inputFocusedvariable.

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

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

Step 2:Add an event listener if the screen or $(window)is tapped or clicked. If the window was tapped or clicked, check if the input is currently in focus. If trueyou must focus the window $(window).focus(), after focusing the window, the blur()function will now work! so you can now unfocus the input element then the keyboard will now hide automatically, then set the inputFocusedvariable to falseagain.

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

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

SetTimeout explanation:The $(window).click()event will trigger if the user tap or click anywhere on the screen (e.g. Button click, Input click, tap or click screen, etc). If you tap the input, at the same time setting the inputFocusedto true, the $(window).click()event triggers then check if inputFocusedis truethen will run the code which hides the virtual keyboard. So it means that whenever you focus an input field the keyboard will hide and that'll be a problem.

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

That's why we're adding a delay so that the code inside if(inputFocused == true)will not run while we're focusing the input field and it will only run if the input field is currently on focus.

这就是我们添加延迟的原因，这样if(inputFocused == true)当我们聚焦输入字段时，里面的代码不会运行，它只会在输入字段当前处于焦点上时运行。

TRIED AND TESTED!

久经考验！

javascript iphone键盘在点击屏幕时不隐藏

提问by UI_Dev

回答by R3tep

回答by wikieswan

回答by jrobichaud

回答by Mumthezir VP

回答by James McDowell

回答by tyskr

回答by Vashtamyty

相关推荐

最近更新

标签

javascript iphone键盘在点击屏幕时不隐藏

提问by UI_Dev

回答by R3tep

回答by wikieswan

回答by jrobichaud

回答by Mumthezir VP

回答by James McDowell

回答by tyskr

回答by Vashtamyty

相关推荐

javascript Immutablejs：将地图的键转换为数组的一行代码？

模拟在 JavaScript 中输入

javascript AngularJS：fn 不是函数

javascript javascript中的简单缓动功能

相关推荐

最近更新

标签