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

Question

我在使用 Android Webkit 浏览器时遇到问题，必须检测何时手动隐藏软键盘(按右上角的按钮)。

如上图所示，当我按下按钮时，软键盘将被隐藏，但不会触发 resize 事件。输入也不模糊。我还发现 document.body.clientHeight 没有改变。那么我应该如何检测这个 Action 呢？

谢谢!

Answer 1

所以这是我解决这个问题的解决方案:

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

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();
        });     

    });

}