移动web应用jquery中如何检测键盘显示/隐藏事件

我正在开发基于web的移动（HTML）应用程序。有没有办法去 检测键盘事件，如键盘可见和键盘隐藏， 在此基础上，我可以控制其他屏幕布局

我尝试过聚焦、模糊、浏览器调整大小事件，但我的问题没有100%解决，所以我只查找键盘事件，实际上我想在键盘上显示页脚时将其隐藏在键盘上，所以我试图在键盘可见时设置相对的页脚位置，在键盘隐藏时设置固定的页脚位置

我已经尝试了以下的工作，但这不可能是100%的解决我的问题

$(document).ready(function () {

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

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

});

---

有谁能帮我解决页脚问题，或者告诉我jquery中是否有键盘事件。

您可以使用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");  
    }
  });
});

使用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;

});

---

请注意，当键盘设置关闭动画时，窗口大小调整事件（以及“键盘关闭”注释块）可能会被多次调用。编辑以满足您的需要。

您好，这里有一个解决方案，用于检查移动设备中的键盘是否处于活动状态

在下面的代码中，“#Email”是我正在使用的输入字段的id

   $(window).resize(function () { //checking for window resize event

    if($(window).width() < 414){ //checking for window width
         if($("#Email").is(":focus")){
             $('.content').css({'margin-top': -15 + 'px'});
             $('.footer').css({'margin-bottom': -100 + 'px'});
         }
    }});

$（窗口）.resize（函数（）{//检查窗口大小调整事件
if（$（window.width（）<414）{//检查窗口宽度
如果（$（“#Email”）.is（“：focus”））{
$（'.content'）.css（{'margin-top'：-15+'px'}）；
$（'.footer'）.css（{'margin-bottom'：-100+'px'}）；
}
}});

最适合在Chrome/Safari等浏览器上使用的bullet prof解决方案。。从2017年11月20日起，在Android和iOS上，将检测具有vh高度单位（视区高度）的div高度的变化

然后，在输入/文本区域的任何模糊/焦点更改上，检查该div的高度是否比模糊/焦点事件之前的高度低30%（以像素为单位）

请参见此处的代码：

---

（显然不允许复制粘贴代码）检测虚拟键盘与硬件键盘

只有在我没有将设备纵向旋转到横向或反之亦然的情况下，它才能工作。因为var_originalSize=$（window.width（）+$（window.height（）；landscap和portait模式不同，因此其触发页脚的不必要位置与上述代码相同。因此，现在我假设只查找键盘事件。是否有？尝试类似$（window）.width（）+$（window）.height（）的方法以避免出现这种情况。它大于横向模式和纵向模式之间的间距，小于键盘高度。移动浏览器中的地址栏是什么？某些浏览器会在滚动时隐藏它，视口高度更改大小事件可能会由于多种原因而发生，从中检测键盘更改并不是一个好主意。请使用

$（document.activeElement）.attr（'type'）=='text'

进行判断。在android上，您可以通过点击三角形（“隐藏键盘按钮”）来隐藏键盘。输入将保持活动状态。这是真正的问题，需要解决三角形隐藏键盘按钮的问题。

   $(window).resize(function () { //checking for window resize event

    if($(window).width() < 414){ //checking for window width
         if($("#Email").is(":focus")){
             $('.content').css({'margin-top': -15 + 'px'});
             $('.footer').css({'margin-bottom': -100 + 'px'});
         }
    }});