如何在 Javascript/Sencha 中监听键盘打开/关闭？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8241492/
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 listen for keyboard open/close in Javascript/Sencha?
提问by Groppe
I have a HTML5/Javascript (Sencha) app that I have packed into PhoneGap for iOS in XCode. One way or another, I want to be able to listen for the keyboard open/close events and do something accordingly. Is there any way to do this?
我有一个 HTML5/Javascript (Sencha) 应用程序，我在 XCode 中将它打包到 PhoneGap for iOS 中。一种或另一种方式，我希望能够监听键盘打开/关闭事件并相应地做一些事情。有没有办法做到这一点？
回答by heyjii
Keyboard will be automatically invoked while you are focusing textfield, textareafield ... . So you can create listener to the focusevent in javascript which is similar to listening to the keyboard open event. Also you can use the blurlistener to handle the keyboard close.
当您聚焦 textfield, textareafield ... 时，将自动调用键盘。因此，您可以在 javascript 中创建焦点事件的侦听器，这类似于侦听键盘打开事件。您也可以使用模糊侦听器来处理键盘关闭。
Thanks.
谢谢。
回答by Nicolas
I've encountered the same issue, and I think that the best solution in your case is to use a PhoneGap plugin which will bind the native events, like this one :
我遇到了同样的问题，我认为在您的情况下最好的解决方案是使用 PhoneGap 插件来绑定本机事件，如下所示：
https://github.com/driftyco/ionic-plugins-keyboard/tree/60b803617af49a10aff831099db90340e5bb654c
https://github.com/driftyco/ionic-plugins-keyboard/tree/60b803617af49a10aff831099db90340e5bb654c
It works great on Android and iOS the same way, just bind those events:
它以同样的方式在 Android 和 iOS 上运行良好，只需绑定这些事件：
window.addEventListener('native.showkeyboard', keyboardShowHandler);
window.addEventListener('native.hidekeyboard', keyboardHideHandler);
回答by mikep
Triggering open status is easy using onclick or onfocus event, but on closing keyboard onblur event is not fired (because cursor remains in input/textarea). So I found solution by detecting window height which is significantly changed on keyboard open/close.
使用 onclick 或 onfocus 事件很容易触发打开状态，但在关闭键盘时不会触发 onblur 事件（因为光标保留在输入/文本区域中）。所以我通过检测键盘打开/关闭时显着变化的窗口高度找到了解决方案。
It is working in modern browsers on Android and iOS too. Demo: http://jsfiddle.net/qu1ssabq/3/
它也适用于 Android 和 iOS 上的现代浏览器。演示：http: //jsfiddle.net/qu1ssabq/3/
If necessary you can improve my code for devices which do not support addEventListener or innerHeight - there are available alternatives on the Internet.
如有必要，您可以针对不支持 addEventListener 或 innerHeight 的设备改进我的代码 - Internet 上有可用的替代方法。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, minimal-ui">
<title>Detect keyboard opened/closed event</title>
</head>
<body>
<textarea id="txta" onclick="xfocus()" onblur="xblur()"></textarea><br>
<span id="status" style="background: yellow; width: auto;">closed</span>
<script type="text/javascript">
function xfocus() {
setTimeout(function() {
height_old = window.innerHeight;
window.addEventListener('resize', xresize);
document.getElementById('status').innerHTML = 'opened'; // do something instead this
}, 500);
}
function xresize() {
height_new = window.innerHeight;
var diff = Math.abs(height_old - height_new);
var perc = Math.round((diff / height_old) * 100);
if (perc > 50)
xblur();
}
function xblur() {
window.removeEventListener('resize', xresize);
document.getElementById('status').innerHTML = 'closed'; // do something instead this
}
</script>
</body>
</html>
回答by joe
Another potential (but very hacky) solution is to watch the window resize event. It won't work for all use-cases, but on smartphones it's not so common to resize the window, so resize events are likely to come from the keyboard opening. This code is untested, but it illustrates the general idea:
另一个潜在（但非常笨拙）的解决方案是观看窗口调整大小事件。它不适用于所有用例，但在智能手机上调整窗口大小并不常见，因此调整大小事件可能来自键盘打开。此代码未经测试，但它说明了总体思路：
let fullWindowHeight = window.innerHeight;
let keyboardIsProbablyOpen = false;
window.addEventListener("resize", function() {
if(window.innerHeight == fullWindowHeight) {
keyboardIsProbablyOpen = false;
} else if(window.innerHeight < fullWindowHeight*0.9) {
keyboardIsProbablyOpen = true;
}
});
Might be helpful to use alongside the focus/blur events to help (for example) detect the keyboard closing when the user presses the back button (as pointed out by @filipvkovic).
与焦点/模糊事件一起使用可能有助于（例如）在用户按下后退按钮时检测键盘关闭（如@filipvkovic 所指出的）。
回答by Jan Jongboom
As far as I can see this is only possible in the Android builds for PhoneGap, see the pull request here: https://github.com/phonegap/phonegap-android/issues/94.
据我所知，这只能在 PhoneGap 的 Android 版本中实现，请参阅此处的拉取请求：https: //github.com/phonegap/phonegap-android/issues/94。
The events are called hidekeyboardand showkeyboard. You might check whether they fire on iOS too.
这些事件被称为hidekeyboard和showkeyboard。您可以检查它们是否也在 iOS 上触发。
