我有一个 HTML5/Javascript (Sencha) 应用程序，我已在 XCode 中将它打包到 PhoneGap for iOS 中。一种或另一种方式，我希望能够监听键盘打开/关闭事件并相应地做一些事情。有没有办法做到这一点？
【问题讨论】：
标签： javascript ios sencha-touch keyboard-events
当您聚焦 textfield, textareafield ... 时，将自动调用键盘。因此，您可以在 javascript 中创建 focus 事件的侦听器，这类似于侦听键盘打开事件。您也可以使用 blur 监听器来处理键盘关闭。
谢谢。
【讨论】：
我遇到了同样的问题，我认为在你的情况下最好的解决方案是使用一个 PhoneGap 插件来绑定原生事件，就像这个：
https://github.com/driftyco/ionic-plugins-keyboard/tree/60b803617af49a10aff831099db90340e5bb654c
它在 Android 和 iOS 上的效果一样好，只需绑定这些事件：
window.addEventListener('native.showkeyboard', keyboardShowHandler);
window.addEventListener('native.hidekeyboard', keyboardHideHandler);
【讨论】：
最近我遇到了类似的问题。经过一番研究，我意识到“Visual viewport Api”是解决方案。
'视觉视口是屏幕的视觉部分，不包括屏幕键盘、捏拉缩放区域之外的区域或任何其他不随页面尺寸缩放的屏幕工件'
https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API
window.visualViewport.addEventListener('resize', event => console.log(event.target));
每次调整“视觉视口”的大小时都会执行上述代码，例如，当键盘打开/关闭时。
【讨论】：
使用 onclick 或 onfocus 事件很容易触发打开状态，但在关闭键盘时不会触发 onblur 事件（因为光标保留在输入/文本区域中）。所以我通过检测在键盘打开/关闭时显着改变的窗口高度找到了解决方案。
它也适用于 Android 和 iOS 上的现代浏览器。演示：http://jsfiddle.net/qu1ssabq/3/
如有必要，您可以针对不支持 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>
【讨论】：
另一个潜在的（但非常老套的）解决方案是观察窗口调整大小事件。它不适用于所有用例，但在智能手机上调整窗口大小并不常见，因此调整大小事件可能来自键盘打开。此代码未经测试，但它说明了总体思路：
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;
}
});
与焦点/模糊事件一起使用可能有助于（例如）在用户按下后退按钮时检测键盘关闭（正如@filipvkovic 所指出的那样）。
【讨论】：
据我所知，这仅适用于 PhoneGap 的 Android 版本，请参阅此处的拉取请求：https://github.com/phonegap/phonegap-android/issues/94。
这些事件称为hidekeyboard 和showkeyboard。您可以检查它们是否也在 iOS 上触发。
【讨论】：
按照camiloHimura's answer的建议，您可以使用window.visualViewport。
视觉视口是屏幕的视觉部分，不包括屏幕键盘、捏拉缩放区域之外的区域或任何其他不随页面尺寸缩放的屏幕工件。
我在几个打开键盘的设备上测量了window.screen.height 和window.visualViewport.height 之间的差异，它总是大于300px。
所以你可以这样做：
const listener = () => {
const MIN_KEYBOARD_HEIGHT = 300 // N.B.! this might not always be correct
const isMobile = window.innerWidth < 768
const isKeyboardOpen = isMobile
&& window.screen.height - MIN_KEYBOARD_HEIGHT > window.visualViewport.height
}
window.visualViewport.addEventListener('resize', listener)
您应该记住，此解决方案可能不适用于所有情况，因为它严重依赖于所有设备键盘高度大致相同的假设。当然，您可以调整硬编码的值，但正如您所见，这不是万无一失的解决方案。
【讨论】：