iphone keyboard not hiding when tapping the screen

Question

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.

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

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

Updated

Tried

 document.activeElement.blur(); 

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

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

Answers will be rewarded as stated!

Answer 1

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