CODEWITHSUNDEEP
iphonekeyboardweb-applicationsblur
munchybunch
munchybunch

Reputation: 6163

hide keyboard in iphone safari webapp

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.

Upvotes: 34

Views: 37608

Answers (10)

NickNgn
NickNgn

Reputation: 340

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.

Upvotes: 0

Tyler Moses
Tyler Moses

Reputation: 21

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

Upvotes: 0

rafg
rafg

Reputation: 165

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!

Upvotes: 3

davidgoli
davidgoli

Reputation: 2495

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

Upvotes: 1

Ben Southall
Ben Southall

Reputation: 687

To detect when the return button is pressed use:

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

Upvotes: 3

iPadDeveloper2011
iPadDeveloper2011

Reputation: 4685

document.activeElement.blur();

Upvotes: 46

Design by Adrian
Design by Adrian

Reputation: 2235

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

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

Upvotes: 2

Husky
Husky

Reputation: 6206

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

Upvotes: 20

Steven
Steven

Reputation: 456

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

Upvotes: 44

ceejayoz
ceejayoz

Reputation: 180177

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

Upvotes: 28

Related Questions