hide keyboard in iphone safari webapp

Question

I\'m creating a webapp for the iPhone, based in HTML/CSS/JS. I\'m using forms to receive input and pass data to the script, but a problem I\'m encountering is that the keybo

Answer 1

$('input:focus').blur();

using the CSS attribute for focused element, this blurs any input that currently has focus, removing the keyboard.

Answer 2

Even more simply, you can call blur() on the currently focused element. $("#inputWithFocus").blur()

Answer 3

document.activeElement.blur();

Answer 4

I came across this issue and have spent some time until getting a satisfactory solution. My issue was slightly different from the original question as I wanted to dismiss the input event upon tapping outside input element area.

The purposed answers above work but I think they are not complete so here is my attempt in case you land this page looking for the same thing I was:

jQuery solution

We append a touchstart event listener to the whole document. When the screen is touched (doesn't matter if it's a tap, hold or scroll) it will trigger the handler and then we will check:

1. Does the touched area represent the input?
2. Is the input focused?

Given these two conditions we then fire a blur() event to remove focus from the input.

ps: I was a little bit lazy so just copied the line from above response, but you can use the jQuery selector for document in case you want to keep consistency of code

$(document).on('touchstart', function (e) {
  if (!$(e.target).is('.my-input') && $('.my-input').is(':focus')) {
    document.activeElement.blur();
  }
});

Hammer.JS solution

Alternatively you can use Hammer.JS to handle your touch gestures. Let's say that you want to dismiss that on a tap event but the keyboard should be there if the users is just scrolling the page (or let's say, hold a text selection so he can copy that and paste into your input area)

In that situation the solution would be:

var hammer = new Hammer(document.body);
hammer.on('tap', function(e) {
  if (!$(e.target).is('.search-input') && $('.search-input').is(':focus')) {
    document.activeElement.blur();
  }
});

Hope it helps!

Answer 5

To detect when the return button is pressed use:

$('input').bind('keypress', function(e) { if(e.which === 13) { document.activeElement.blur(); } });

Answer 6

For anyone using Husky's code in AngularJs here is the rewrite:

function isTextInput(node) {
    return ['INPUT', 'TEXTAREA'].indexOf(node.nodeName) !== -1;
}

angular.element($document[0]).on('touchstart', function(e) {
  var activeElement = angular.element($document[0].activeElement)[0];
  if(!isTextInput(e.target) && isTextInput(activeElement)) {
    activeElement.blur();
  }
});