Wednesday, August 7, 2019

How To Hide iPhone or iPad Keyboard When Tapping On The Screen?

To hide or dismiss the keyboard on iPad or iPhone safari browser, you need to lose the focus on your input.
document.activeElement.blur();
With this line you remove the focus and the keyboard disappear.

To be able to hide or dismiss iPhone or iPad keyboard when tapping on the screen, you need to add event on your body. It is possible to recognize touch events on the iPad's Safari browser using jQuery. If you're using jQuery 1.7+ it's even simpler to fix the problem as follows:
$(document).ready(function () {
    $('body').on({
      touchstart: function() {
        if (document.activeElement) {
          document.activeElement.blur();
        }
      }
    });
 });
This detects when you tab the body and then blurs it, so the keyboard will disappear.