Question

我有一个HTML5 / Javascript（Sencha）应用程序，我已经在XCode中打包到PhoneGap for iOS中。无论如何，我希望能够听取键盘打开/关闭事件并做相应的事情。有没有办法做到这一点？

Answer 1

在对焦textfield，textareafield时，将自动调用键盘....因此，您可以在javascript中创建焦点事件的监听器，这类似于收听键盘打开事件。您还可以使用模糊侦听器来处理键盘关闭。

感谢。

Answer 2

我遇到了同样的问题，我认为在你的情况下最好的解决方案是使用PhoneGap插件绑定本机事件，如下所示：

https://github.com/driftyco/ionic-plugins-keyboard/tree/60b803617af49a10aff831099db90340e5bb654c

它在Android和iOS上运行方式相同，只需绑定这些事件：

window.addEventListener('native.showkeyboard', keyboardShowHandler);

window.addEventListener('native.hidekeyboard', keyboardHideHandler);

Answer 3

使用onclick或onfocus事件触发打开状态很容易，但是在关闭键盘时onblur事件不会被触发（因为光标保留在input / textarea中）。所以我通过检测窗口高度找到了解决方案，这在键盘打开/关闭时发生了显着变化。

它也适用于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>

Answer 4

据我所知，这仅适用于PhoneGap的Android版本，请参阅此处的拉取请求：https://github.com/phonegap/phonegap-android/issues/94。

这些事件称为hidekeyboard和showkeyboard。您可以检查它们是否也在iOS上启动。

Answer 5

另一种潜在的（但很棘手的）解决方案是观看窗口调整大小事件。并非适用于所有用例，但在智能手机上，调整窗口大小并不常见，因此调整大小事件很可能来自键盘打开。这段代码未经测试，但是说明了总体思路：

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所指出的）时，有助于检测键盘的关闭。

Answer 6

最近，我陷入了类似的问题。经过研究，我意识到“ Visual viewport Api”是解决方案。

“视觉视口是屏幕的视觉部分，不包括屏幕上的键盘，捏缩放区域之外的区域或任何其他不随页面尺寸缩放的人工屏幕” >

https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API

window.visualViewport.addEventListener('resize', event => console.log(event.target));

上面的代码将在每次更改“可视视口”的大小时执行，例如，当键盘打开/关闭时。

Answer 7

按照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)

您应该记住，此解决方案可能不适用于所有情况，因为它在很大程度上依赖于所有设备键盘高度大致相同的假设。当然，您可以调整硬编码值，但正如您所见，这不是万无一失的解决方案。

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

7 个答案: