title: iphone keyboard not hiding when tapping the screen
body: <p>I have an input field with number type</p>
  
  <pre><code>&lt;input type="number" pattern="[0-9]*"/&gt;
  </code></pre>
  
  <p>In normal browsers, I'm typing some numbers and I'm tapping the screen, it hides iphone/ipad keyboard. </p>
  
  <p>But this is not working if it is <strong>inside iframe</strong>. we need to click done button explicitly. <strong>This issue is only for iphone/ipad</strong></p>
  
  <p>This is an iframe issue. Any fix using Javascript/Jquery would be highly appreciated.</p>
  
  <p><strong>Updated</strong></p>
  
  <p>Tried </p>
  
  <pre><code> document.activeElement.blur();
  </code></pre>
  
  <p>and focusout when event triggered in javascript. none of them are working..</p>
  
  <pre><code>   $(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();
       });
  </code></pre>
  
  <p>focusout is not calling inside iframe!</p>
  
  <p>My question is <code>**How to force close ipad/iphone keypad when input element is not focused using Javascript/Jquery?**</code> </p>
  
  <p>Answers will be rewarded as stated!</p>