How to capture the hide keyboard event on iOS using JavaScript

Question

I need to do some resizing of the content of a web page when the hide keyboard button is pressed on an iPad virtual keyboard. Which JavaScript event is launched when the keyboard is hidden?

possible duplicate of [iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?](http://stackoverflow.com/questions/2593139/ipad-web-app-detect-virtual-keyboard-using-javascript-in-safari) — mplungjan, Mar 22 '12 at 09:28

score 22 · Accepted Answer · answered Oct 19 '13 at 08:24

22

You can use the focusout event. It's like blur, but bubbles. It will fire when the keyboard closes (but also in other cases, of course). In Safari and Chrome the event can only be registered with addEventListener, not with legacy methods. Here is an example I used to restore a Phonegap app after keyboard dismissal.

 document.addEventListener('focusout', function(e) {window.scrollTo(0, 0)});

Without this snippet, the app container stayed in the up-scrolled position until page refresh.

answered Oct 19 '13 at 08:24

Per Quested Aronsson

11,380
8
54
76

Ha, that's the exact scenario I have "restore a Phonegap app after keyboard dismissal" – ganders Jul 09 '14 at 19:37
This EventListener helped me to fix an issue I had with ExtJS 5; the ExtJS page contents would remain scrolled down for a bit after the IOS keyboard was hidden in Safari. That's a problem since in ExtJS 5.0.1 scrolling is disabled on touch interfaces. Therefore I used this event to trigger a doLayout() on the ExtJS view container which made the container fit again within screen bounds. – Jasper Dec 30 '14 at 12:01
This [often doesn't work on the Chrome 41/iOS 6 emulator on CrossBrowserTesting](http://i.imgur.com/bZbz9Cm.png). – Dan Dascalescu Jul 15 '15 at 00:21
This works great if there is only one input field, but not if there are multiple. If the user clicks/focuses on a different input field the window will scroll to the top and leave the user wondering what happened to the input field they clicked on. – kenecaswell Dec 04 '15 at 21:13
1

@kenecaswell: you could make the scrollTo position dynamic. It doesn't have to always scroll to 0. – Per Quested Aronsson Dec 05 '15 at 22:27
The problem with this is that lots of other things can trigger this, so you'll end up firing your event in other cases when it's not just a keyboard closing... – Will P. Apr 04 '19 at 19:56

score 3 · Answer 2 · edited Mar 24 '19 at 15:12

3

Here is a good place to start List of supported Javascript events on iPad

which leads to https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW5

which does not list it.

This one gives a work around iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?

edited Mar 24 '19 at 15:12

Cœur

37,241
25
195
267

answered Mar 22 '12 at 09:27

mplungjan

169,008
28
173
236

1

Thanks, I thins that I will listen to the onblur events. Because when the virtual keyboard is closed, the inputs loose focus. – Marius Mar 22 '12 at 11:06
@Marius focus is not looses when keyboard hide button is pressed. – Vijay Shegokar Jan 28 '14 at 10:03

Tristan G · Answer 3 · 2021-08-18T06:42:16.850

0

    window.onblur = function(e) {
      window.scrollTo(0, 1);
    };

This is my solution, which works fine, if someone pressed the "closekeyboard" for iOS 14.7 .

edited Aug 18 '21 at 06:42

answered Aug 17 '21 at 14:54

Tristan G

1,720
2
13
22

How to capture the hide keyboard event on iOS using JavaScript

3 Answers3

Linked