Question

我遇到 Android Webkit浏览器的问题，必须检测何时用手隐藏软键盘（按右上方的按钮）。

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

谢谢！

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的值。因此，我创建了一个函数，该函数在被调用时将每500ms连续运行一次，每次检索设备窗口的高度并将其存储在变量中。我还创建了另一个变量，该变量将在页面加载后获得设备的高度。一旦这两个变量值相互匹配，这向我指示键盘已隐藏。

完整代码如下：

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

    });

}

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

1 个答案: