Javascript 如何检测Android浏览器隐藏软键盘事件？

我的Android Webkit浏览器有问题，必须检测到软键盘何时被手动隐藏（按下右上角的按钮）

如上图所示，当我按下按钮时，软键盘将被隐藏，但不会触发

调整大小

事件。输入也不模糊。我还发现

document.body.clientHeight

没有更改。那么我应该如何检测这种行为呢

---

谢谢

这就是我解决这个问题的方法：

首先，我运行了一个函数来检测正在使用的移动设备：

var getMobileOperatingSystem = function() {
    var userAgent = navigator.userAgent || navigator.vendor || window.opera;
    if (/android/i.test(userAgent)) {
        return "Android";
    }
};
if (getMobileOperatingSystem() === 'Android') {
    // REST OF CODE
}

当android键盘打开时，这会更改window.innerHeight的值。 因此，我创建了一个函数，调用该函数时，该函数将每500毫秒连续运行一次，每次检索设备窗口的高度并将其存储在变量中。我还创建了另一个变量，该变量将在页面加载时获取设备高度。一旦这两个变量的值相互匹配，我就知道键盘被隐藏了

以下是完整的代码：

var getMobileOperatingSystem = function() {

    var userAgent = navigator.userAgent || navigator.vendor || window.opera;

    if (/android/i.test(userAgent)) {
        return "Android";
    }

};

if (getMobileOperatingSystem() === 'Android') {

    var windowHeight;
    var originalHeight = window.innerHeight;

    var whenWindowHeightChanges = function(callback) {

        console.log(windowHeight, 'current window height');
        console.log(originalHeight, 'original window height');

        if (windowHeight === originalHeight) {
            if (typeof callback == 'function') {
                callback();
            }
        } else {
            setTimeout(function(){
                windowHeight = window.innerHeight;
                whenWindowHeightChanges(callback);
            }, 500);
        }
    }

    var input = $('footer input');

    input.on('focus', function(){

        whenWindowHeightChanges(function(){
            console.log('conditions passed');
            // CODE TO RUN WHEN ANDROID KEYBOARD IS HIDDEN
            windowHeight = null;
            input.blur();
        });     

    });

}

---

这就是我解决这个问题的办法：

首先，我运行了一个函数来检测正在使用的移动设备：

var getMobileOperatingSystem = function() {
    var userAgent = navigator.userAgent || navigator.vendor || window.opera;
    if (/android/i.test(userAgent)) {
        return "Android";
    }
};
if (getMobileOperatingSystem() === 'Android') {
    // REST OF CODE
}

当android键盘打开时，这会更改window.innerHeight的值。 因此，我创建了一个函数，调用该函数时，该函数将每500毫秒连续运行一次，每次检索设备窗口的高度并将其存储在变量中。我还创建了另一个变量，该变量将在页面加载时获取设备高度。一旦这两个变量的值相互匹配，我就知道键盘被隐藏了

以下是完整的代码：

var getMobileOperatingSystem = function() {

    var userAgent = navigator.userAgent || navigator.vendor || window.opera;

    if (/android/i.test(userAgent)) {
        return "Android";
    }

};

if (getMobileOperatingSystem() === 'Android') {

    var windowHeight;
    var originalHeight = window.innerHeight;

    var whenWindowHeightChanges = function(callback) {

        console.log(windowHeight, 'current window height');
        console.log(originalHeight, 'original window height');

        if (windowHeight === originalHeight) {
            if (typeof callback == 'function') {
                callback();
            }
        } else {
            setTimeout(function(){
                windowHeight = window.innerHeight;
                whenWindowHeightChanges(callback);
            }, 500);
        }
    }

    var input = $('footer input');

    input.on('focus', function(){

        whenWindowHeightChanges(function(){
            console.log('conditions passed');
            // CODE TO RUN WHEN ANDROID KEYBOARD IS HIDDEN
            windowHeight = null;
            input.blur();
        });     

    });

}

---

将调整大小事件处理程序附加到哪个元素？我可以看到

document.body.onresize

在打开/折叠键盘以及地址栏时触发事件。在过去，我会添加一个1px div，其中包含

不透明度：0

和

指针事件：none

，绝对位于

底部：0

，并在页面加载时记录其偏移量（即，当页面第一次加载时，键盘总是折叠）。当resize事件被触发时，我检查该div的当前偏移量是多少，如果它与原始偏移量匹配，那么我知道屏幕上的键盘刚刚折叠。谢谢你，@MattNewelski，聪明的工作。我想隐藏此图片中未显示的底部导航栏。要将调整大小事件处理程序附加到哪个元素？我可以看到

document.body.onresize

在打开/折叠键盘以及地址栏时触发事件。在过去，我会添加一个1px div，其中包含

不透明度：0

和

指针事件：none

，绝对位于

底部：0

，并在页面加载时记录其偏移量（即，当页面第一次加载时，键盘总是折叠）。当resize事件被触发时，我检查该div的当前偏移量是多少，如果它与原始偏移量匹配，那么我知道屏幕上的键盘刚刚折叠。谢谢你，@MattNewelski，聪明的工作。我想隐藏一个底部导航栏，它没有显示在这张图片中。