如何在移动Web应用程序的jQuery中检测键盘显示/隐藏事件 [英] How to detect keyboard show/ hide event in jquery for mobile web application

问题描述

我正在开发基于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中检测键盘显示/隐藏事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！