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 keyboard won't disappear. The user will enter the information, hit submit, and since it's JavaScript the page doesn't reload. The keyboard remains in place, which is a nuisance and adds another step for users (having to close it).

Is there any way to force the keyboard in Safari to go away? Essentially, I have a feeling this question is equivalent to asking how I can force an input box to lose focus or to blur. Looking online, I find plenty of examples to detect the blur event, but none to force this event to occur.

Answer 1

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

Answer 2

document.activeElement.blur();

Answer 3

You could try focus()ing on a non-text element, like the submit button.

Answer 4

Here's a small code snippet that always hides the keyboard whenever the focus is in an input or textarea field and the user taps outside of that element (the normal behaviour in desktop browsers).

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

document.addEventListener('touchstart', function(e) {
    if (!isTextInput(e.target) && isTextInput(document.activeElement)) {
        document.activeElement.blur();
    }
}, false);

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

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 7

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

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

Answer 8

Be sure to set, in CSS:

body {
  cursor: pointer;
}

otherwise, your event handler calling document.activeElement.blur() will never get fired. For more info, see: http://www.shdon.com/blog/2013/06/07/why-your-click-events-don-t-work-on-mobile-safari

Answer 9

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

Answer 10

In my case, I have an app: AppComponent -> ComponentWithInput and with the html:

<div class="app-container" (click)="onClick()">

    <component-with-input></component-with-input>

</div>

And everything I do is adding (click)="onClick()"

You can leave the method empty as I did:

onClick() {
    // EMPTY
}

This works for me.