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

问题描述：

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

I am working on web base mobile (HTML) application. Is there any way to detect keyboard event like when keyboard is visible and keyboard hide, base on that I can control other screen layout.

我尝试了焦点，模糊，浏览器大小调整事件，但我的问题仍未解决100％，所以我只在寻找键盘事件，实际上我想在可见键盘(页脚)时将页脚隐藏在键盘上在键盘上，因此我尝试在显示键盘时将页脚位置设置为相对，并在隐藏键盘时将页脚位置设置为固定.

I've tried focus, blur, browser resize event but my problem have not resolve 100%, so I am looking for only keyboard event, actually I want to hide footer over keyboard when keyboard is visible as it(footer) appear over the keyboard, so I am trying to set footer position relative when keyboard is visible and footer position as fixed when keyboard goes hide.

我已经尝试过如下工作，但是那不可能是我的问题的100％解决方案.

I've tried as below it work but that could not be the 100% resolution of my problem.

$(document).ready(function () {

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

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

});

有人可以帮助我解决页脚问题或让我知道jquery中是否存在键盘事件.

Can anybody help me how to resolve footer problem or let me know if there is keyboard event in jquery.

答

您可以使用resize事件获取键盘是否出现

You can use resize event to get if keyboard is appearing or not

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

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

相关推荐