iphone keyboard not hiding when tapping the screen

后端未结

关注

 7  1081

小鲜肉

I have an input field with number type

In normal browsers, I\'m typing some numbers and I\'m

相关标签:

7条回答

花落未央

2021-02-07 00:20

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

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.

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

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>

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

0 讨论(0)

栀梦

2021-02-07 00:26

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;

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

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

0 讨论(0)

轻奢々

2021-02-07 00:27

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 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
}

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

0 讨论(0)

孤街浪徒

2021-02-07 00:27
Well... You can give me that reward cause I just solved this problem using a very SIMPLE solution.

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 inputFocused variable.
```
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 true you 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 inputFocused variable to false again.
```
$(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 inputFocused to true, the $(window).click() event triggers then check if inputFocused is true then 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.

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.

TRIED AND TESTED!
0 讨论(0)
发布评论:

提交评论
- 加载中...
鱼传尺愫

2021-02-07 00:28
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();
});
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
失恋的感觉

2021-02-07 00:34
Hope this'll solve your issue, it simply removes the focus on active element.
- Using Javascript
```
 document.activeElement.blur();
```
- Using jQuery
```
 $("#Clicked_button_id").click(function() {
    $("#input_field_id").blur();                               
});
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

1 2 下一页