如何在jquery中检测移动Web应用程序中的键盘显示/隐藏事件
我正在开发基于Web的移动（HTML）应用程序。有什么方法可以
检测键盘事件，如键盘可见和键盘隐藏，基于我可以控制其他屏幕布局。 我尝试了焦点，模糊，浏览器resize事件，但我的问题没有解决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"); } }); });
if($(document.activeElement).attr('type') == "text"){ console.log("Keyboard is visible"); }else{ console.log("Keyboard is not visible"); }
使用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; });
请注意，当键盘动画关闭时，窗口resize事件（以及因此“键盘关闭”注释块）可能会被调用多次。 编辑以满足您的需求。
嗨，这是我可以检查键盘是否在移动设备中处于活动状态的解决方案之一。
在下面的代码中，“＃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'}); } }});
从2017年20月20日开始，适用于Chrome / Safari等..以及Android和iOS上的大多数子弹教程解决方案将检测具有vh高度单位（视口高度）的div的高度变化
然后在输入/文本区域的任何模糊/焦点变化上检查该div现在的高度是否比该模糊/焦点事件之前的高度少30％（以像素为单位）。
请参阅此处的代码： 检测虚拟键盘与硬件键盘 （显然不允许复制粘贴代码）检测虚拟键盘与硬件键盘