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

【问题标题】：How to detect keyboard show/ hide event in jquery for mobile web application如何在移动 Web 应用程序的 jquery 中检测键盘显示/隐藏事件
【发布时间】：2015-04-01 01:50:05
【问题描述】：

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

我已经尝试过焦点、模糊、浏览器调整大小事件，但我的问题没有 100% 解决，所以我只寻找键盘事件，实际上我想在键盘可见时隐藏键盘上的页脚（页脚）出现在键盘上，所以我试图在键盘可见时设置页脚位置相对，在键盘隐藏时设置页脚位置。

我已经尝试过以下方法，但这不能 100% 解决我的问题。

$(document).ready(function () {

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

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

});

谁能帮我解决页脚问题或者让我知道jquery中是否有键盘事件。

【问题讨论】：

用$(document.activeElement).attr('type') === 'text'判断。转介stackoverflow.com/questions/14902321/…

标签： jquery

【解决方案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");  
    }
  });
});

【讨论】：

它仅在我没有将设备纵向旋转到横向或反之亦然的情况下才有效。因为 var _originalSize = $(window).width() + $(window).height() ；横向和纵向模式不同，因此根据上述代码触发页脚的不必要位置。因此，现在我想只寻找键盘事件..有吗？？
尝试类似 $(window).width() + $(window).height()
手机浏览器的地址栏是怎么回事？一些浏览器在滚动时隐藏它并且视口高度发生变化
resize 事件可能由于多种原因而发生，并且从中检测键盘更改并不是一个好主意。

【解决方案2】：

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

【讨论】：

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

【解决方案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;

});

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

【讨论】：

【解决方案4】：

截至 2017 年 11 月 20 日，适用于 Chrome/Safari 等以及 Android 和 iOS 的最重要的教授解决方案将是检测具有 vh 高度单位的 div 的高度变化（视口高度）

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

在此处查看代码：Detect virtual keyboard vs. hardware keyboard （显然不允许复制粘贴代码）检测虚拟键盘与硬件键盘

【讨论】：

【解决方案5】：

您好，这是我用来检查键盘在移动设备中是否处于活动状态的解决方案之一。

在下面的代码中，“#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'});
         }
    }});

【讨论】：