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?

Answer 1

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.

Answer 2

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?