如何在移动 Web 应用程序的 jquery 中检测键盘显示/隐藏事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28272274/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to detect keyboard show/ hide event in jquery for mobile web application
提问by Nitin Gite
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.
我正在开发基于 Web 的移动 (HTML) 应用程序。有什么方法可以检测键盘事件，例如键盘可见和键盘隐藏时，我可以控制其他屏幕布局。
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.
我试过如下它的工作，但这不可能是我问题的 100% 解决方案。
$(document).ready(function () {
$("input").focus(function() {
$(".copyright_link").css("position","relative");
});
$("input").blur(function() {
$(".copyright_link").css("position","fixed");
});
});
Can anybody help me how to resolve footer problem or let me know if there is keyboard event in jquery.
任何人都可以帮助我如何解决页脚问题，或者让我知道 jquery 中是否有键盘事件。
采纳答案by suish
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");
}
});
});
回答by Alfaz Jikani
if($(document.activeElement).attr('type') == "text"){
console.log("Keyboard is visible");
}else{
console.log("Keyboard is not visible");
}
回答by Dan
Using jQuery:
使用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;
});
Note that the window resize event (and thus the "Keyboard closed" comment block) may get called several times as the keyboard animates closed. Edit to suit your needs.
请注意，当键盘动画关闭时，窗口调整大小事件（以及“键盘关闭”注释块）可能会被多次调用。编辑以满足您的需求。
回答by TBE
The most bullet prof solution that works across Chrome/Safari etc.. and on both Android and iOS as of 20-nov-2017 will be to detect a change in the height of a div that has a vh height units (viewport height)
截至 2017 年 11 月 20 日，适用于 Chrome/Safari 等以及 Android 和 iOS 的最有效的解决方案是检测具有 vh 高度单位（视口高度）的 div 的高度变化
Then on any blur/focus change of an input/textarea check if that div now has a height of 30% less (in pixels) than it used to have before that blur/focus event.
然后在输入/文本区域的任何模糊/焦点更改时，检查该 div 现在的高度是否比在该模糊/焦点事件之前低 30%（以像素为单位）。
See the code here: Detect virtual keyboard vs. hardware keyboard(its not allowed to copy paste code apparently) Detect virtual keyboard vs. hardware keyboard
请参阅此处的代码：检测虚拟键盘与硬件键盘（显然不允许复制粘贴代码）检测虚拟键盘与硬件键盘
回答by vikas etagi
Hi here is one of the solution which worked for me to check if keyboard is active in mobile devices.
嗨，这是一种对我有用的解决方案，用于检查键盘在移动设备中是否处于活动状态。
In the below code "#Email" is the id of the input field I am using.
在下面的代码中，“#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'});
}
}});
