如何在Javascript/Sencha中监听键盘打开/关闭

How to listen for keyboard open/close in Javascript/Sencha?

本文关键字：键盘 关闭 监听 Sencha Javascript      更新时间：2023-09-26

我有一个HTML5/Javascript (Sencha)应用程序，我已经打包到PhoneGap的iOS XCode。无论如何，我希望能够侦听键盘打开/关闭事件并相应地做一些事情。有什么办法可以做到吗?

键盘将自动调用，而你正在聚焦textfield, textarea ... .所以你可以在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);

最近我遇到了一个类似的问题。经过一番研究，我意识到"视觉视口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 -有可用的替代品在互联网上。

<!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>

根据camiloHimura的回答，您可以使用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)

你应该记住，这个解决方案可能不是在所有情况下都有效，因为它严重依赖于所有设备键盘高度大致相同的假设。当然，您可以调整硬编码的值，但是，正如您所看到的，这不是一个万无一失的解决方案。

另一个可能的解决方案是观察窗口大小调整事件。它并不适用于所有用例，但在智能手机上，调整窗口大小并不常见，因此调整大小事件可能来自键盘打开。这段代码是未经测试的，但它说明了一般的思想:

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上运行

相关文章：