javascript - 检测何时使用软键盘并运行 JS 函数？

Question

我有一个网站，点击它会打开一个包含表单的模式。我在我的 iPad 上注意到，当软键盘打开时，它覆盖了表单的几个字段，并且由于我靠近屏幕底部，我无法滚动以显示那些隐藏的字段。

在研究这个问题时，我遇到了 this answer其中包括来自 this answer 的代码.但是，在 iOS 8.3 上测试时，这些答案似乎都不起作用。

这是我想要实现的目标:

• 检测键盘何时打开。
• 找到键盘的高度。
• 在页脚底部添加内边距以适应键盘的高度。
• 当键盘关闭或关闭时，填充将被移除。

有几点需要注意:

• 如果有人正在使用连接的键盘(包括蓝牙键盘)，请不要做任何事情，因为不应出现软键盘
• jQuery 可以使用。
• 解决方案必须通过客户端代码运行。
• 我更喜欢涵盖 iOS 和 Android 的解决方案。最好是任何可以使用软键盘的设备。

当有人使用软键盘作为在模态中填写表单的方式时，我如何才能实现增加页脚填充的解决方案，该解决方案适用于大多数设备？

Answer 1

不久前我遇到了一个与此类似的问题，我找到了一个小的解决方案，当使用手机或平板电脑并激活键盘时，它会触发屏幕的调整大小事件，因此您可以使用它触发功能。

var lastHeight = $(window).height(); //  store the intial height.
var lastWidth = $(window).width(); //  store the intial width.
var keyboardIsOn = false;

$(window).resize(function () {
    if ($("input").is(":focus")) {
        keyboardIsOn =
           ((lastWidth == $(window).width()) && (lastHeight > $(window).height()));
    }   
    if(keyboardIsOn){
        var keyboardHeight = lastHeight - $(window).height();
        $("footer").css("padding", keyboardHeight+"px");
    } else{
        $("footer").removeAttr("style");

        //or if you just want to remove the padding
        //$("footer").css("padding", 0);
    }
}); 

//An alternative solution is by checking if the height of the screen 
//change on input/textarea focus.

$('input, textarea').focus(function() {
     keyboardIsOn =
           ((lastWidth == $(window).width()) && (lastHeight > $(window).height()));
     if(keyboardIsOn){
        var keyboardHeight = lastHeight - $(window).height();
        $("footer").css("padding", keyboardHeight+"px");
    } else{
        $("footer").removeAttr("style");

        //or if you just want to remove the padding
        //$("footer").css("padding", 0);
    }
});