JS on the phone soft keyboard monitoring

Source: Internet
Author: User


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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.