iphone keyboard not hiding when tapping the screen

Question

I have an input field with number type

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

Answer 1

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

---

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