如何在jquery中检测移动Web应用程序中的键盘显示/隐藏事件

Question

我正在开发基于Web的移动(HTML)应用程序.有没有办法检测键盘事件,如键盘可见和键盘隐藏,基于我可以控制其他屏幕布局.

我已经尝试了焦点,模糊,浏览器调整大小事件,但我的问题没有解决100%,所以我只寻找键盘事件,实际上我想在键盘可见时隐藏页脚,因为它(页脚)出现在键盘上,所以我试图在键盘可见时设置相对的页脚位置,并在键盘隐藏时将页脚位置固定.

我尝试过如下工作,但这不能解决我的问题.

$(document).ready(function () {

  $("input").focus(function() {
    $(".copyright_link").css("position","relative");    
  });      

  $("input").blur(function() {
    $(".copyright_link").css("position","fixed");   
  });      

});

任何人都可以帮我解决页脚问题,或者让我知道jquery中是否有键盘事件.

Answer 1

如果键盘出现与否,您可以使用resize事件来获取

$(document).ready(function(){
  var _originalSize = $(window).width() + $(window).height()
  $(window).resize(function(){
    if($(window).width() + $(window).height() != _originalSize){
      console.log("keyboard show up");
      $(".copyright_link").css("position","relative");  
    }else{
      console.log("keyboard closed");
      $(".copyright_link").css("position","fixed");  
    }
  });
});

Answer 2

if($(document.activeElement).attr('type') == "text"){
    console.log("Keyboard is visible");
}else{
    console.log("Keyboard is not visible");  
}

Answer 3

使用jQuery:

var lastWindowWidth = $(window).width(),
    lastWindowHeight = $(window).height();

$(window).resize(function() {

    var newWindowWidth = $(window).width(),
        newWindowHeight = $(window).height();

    if( newWindowHeight > lastWindowHeight && newWindowWidth == lastWindowWidth ) {

        // Keyboard closed
        // ...

    }

    lastWindowWidth = newWindowWidth;
    lastWindowHeight = newWindowHeight;

});

请注意,当键盘动画关闭时,窗口调整大小事件(以及"键盘关闭"注释块)可能会被调用多次.编辑以满足您的需求.