JS on the phone soft keyboard monitoring

JS has not been able to monitor the phone's soft keyboard directly, but there are other angles to determine whether the soft keyboard bounce. For example, whether the input box gets focus, etc.
Focusin and focusout support bubbling, corresponding to focus and blur, using Focusin and Focusout because Focusin and focusout can bubble, focus and blur do not bubble, so you can use the event proxy, Handle situations where multiple input boxes are present.

$ (document). On (' Focusin ', function () {//Soft keyboard popup event handling}), $ (document). On (' Focusout ', function () {//Soft keyboard closed event handling});

　　

However, in practice this method is only valid on iOS, keyboard pop-up and keyboard are closed with the input box Focusin and focusout one by one corresponding.
In Android, click on the button on the keyboard, although the keyboard is closed, the input box is still in focus, and does not trigger the Focusout event.

Through practice, we find a kind of flexible method. Comparing the clientheight of window resize with the clientheight when the page was originally entered, if it is less than the initial value, then it can be considered as a keyboard eject, otherwise, the keyboard is considered to be closed.

Keyboard pop-up and pick-up in Android will change the height of the window, thus listening to the window's resize.

var clientheight = Document.documentElement.clientHeight | | document.body.clientheight;$ (Window). On (function  () {    var nowclientheight = Document.documentElement.clientHeight | | document.body.clientHeight;     if (ClientHeight > nowclientheight) {        // Keyboard Popup event handling     }     Else {        // keyboard-closed event processing     }});

Attach a mobile WebView to the Focusin, focusout support situation.

JS on the phone soft keyboard monitoring