h5 mobile terminal listening soft keyboard pops up, put away

In front of the keyboard pops up a blog h5 Android webview interface adapted to modify the height of the listener mentioned how soft keyboard in adnroid the bounce and away, is the height of the window changes occur use
window.onresize events do break points, but ios soft keyboard does not bounce away window.onresize trigger event.
Summary:
1. In ios soft keyboard pops up, just cause $ ( 'body') scrollTop value changes, but we can do to judge case by obtaining the focus input box, but can only use this program in the ios. because of the android keyboard away after the initiative, but did not enter the box beneath the coke, and after ios keyboard will be put away out of focus;
height 2. in android soft keyboard pops up or put away, it will change the window Therefore onresize monitor window of the event;

一、Android

// Get the height of the original window
var originalHeight = || document.documentElement.clientHeight document.body.clientHeight;
window.onresize = function () {
    // hide the keyboard will cause the bounce height of the window is changed
       var resizeHeight = document. || document.body.clientHeight documentElement.clientHeight;
        iF (resizeHeight-0 <originalHeight-0) {
         // bounce when the soft keyboard, the operation here
         } the else {
         // put away when the soft keyboard, the operation here
         }
}


two, iOS
focusin focusout support and bubbling, and the corresponding focus blur, and the reason for using focusin focusout are focusout focusin and can bubble, focus blur, and without bubbling, so that the event broker can process a plurality of input boxes the presence of.
 document.body.addEventListener ( 'focusIn', () => {
            // pop soft keyboard event handling
            IF (isIphone ()) {

            }
        })
  document.body.addEventListener ( 'focusOut', () => {
       // event handling software keyboard stowed
        IF (isIphone ()) {

        }
   })
---------------- -----
author: Shaohua One
source: CSDN
original: https: //blog.csdn.net/u012982629/article/details/81905894
copyright: This article is a blogger original article, reproduced, please attach Bowen link!

Guess you like

Origin www.cnblogs.com/xiaoshen666/p/11005020.html
Recommended