Fatal编程技术网
  • javascript/
  • 如何在Javascript/Sencha中监听键盘打开/关闭？

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

javascript ios sencha-touch

如何在Javascript/Sencha中监听键盘打开/关闭？,javascript,ios,sencha-touch,keyboard-events,Javascript,Ios,Sencha Touch,Keyboard Events,我有一个HTML5/Javascript（Sencha）应用程序，我已经将它打包到XCode中的PhoneGap for iOS中。无论如何，我希望能够监听键盘的打开/关闭事件，并相应地做一些事情。有什么方法可以做到这一点吗？据我所知，这只能在Android版本的PhoneGap中实现，请参见此处的pull请求： 这些事件称为hidekeyboard和showkeyboard。您可以检查它们是否也在iOS上启动。当您聚焦textfield、textareafield….时，键盘将自动调用。因此，

我有一个HTML5/Javascript（Sencha）应用程序，我已经将它打包到XCode中的PhoneGap for iOS中。无论如何，我希望能够监听键盘的打开/关闭事件，并相应地做一些事情。有什么方法可以做到这一点吗？

据我所知，这只能在Android版本的PhoneGap中实现，请参见此处的pull请求：

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

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

谢谢。

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

它在Android和iOS上的工作原理相同，只需绑定这些事件：

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

window.addEventListener('native.hidekeyboard', keyboardHideHandler);
使用onclick或onfocus事件触发打开状态很容易，但在关闭键盘时不会触发onblur事件（因为光标保留在输入/文本区域）。因此，我通过检测窗口高度找到了解决方案，该高度在键盘打开/关闭时发生了显著变化

它也在安卓和iOS上的现代浏览器中工作。演示：

如果需要，您可以为不支持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>


检测键盘打开/关闭事件


关闭
函数xfocus（）{
setTimeout（函数（）{
高度=窗内高度；
addEventListener（'resize'，xresize）；
document.getElementById（'status'）。innerHTML='opened'；//请执行以下操作
}, 500);
}
函数xresize（）{
高度\u new=window.innerHeight；
var diff=Math.abs（高度旧-高度新）；
var perc=数学圆整（（差异/高度）*100）；
如果（perc>50）
xblur（）；
}
函数xblur（）{
removeEventListener（'resize'，xresize）；
document.getElementById（'status'）。innerHTML='closed'；//请执行以下操作
}
另一个潜在的（但非常棘手的）解决方案是观看窗口大小调整事件。它并不适用于所有用例，但在智能手机上，调整窗口大小并不常见，因此调整窗口大小的事件可能来自键盘的打开。此代码未经测试，但它说明了总体思路：

让fullWindowHeight=window.innerHeight；
让keyboardIsProbablyOpen=false；
addEventListener（“调整大小”，函数（）{
如果（window.innerHeight==fullWindowHeight）{
keyboardIsProbablyOpen=false；
}否则如果（window.innerHeight
与焦点/模糊事件一起使用可能有助于（例如）在用户按下后退按钮时检测键盘是否关闭（如@filipvkovic所指出）。

最近我遇到了类似的问题。经过一些研究，我意识到“可视视口Api”是解决方案

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

每次调整“可视视口”的大小时（例如，当键盘打开/关闭时），都会执行上述代码。

如所建议，您可以使用窗口。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)


const listener=（）=>{
常量最小键盘高度=300//N.B.！这可能并不总是正确的
const isMobile=window.innerWidth<768
const isKeyboardOpen=isMobile
&&window.screen.height-最小键盘高度>window.visualViewport.height
}
window.visualViewport.addEventListener（'resize'，listener）
您应该记住，此解决方案可能不适用于所有情况，因为它严重依赖于所有设备键盘高度大致相同的假设。当然，您可以调整硬编码值，但正如您所看到的，这不是一个防弹解决方案。

当您聚焦textfield、textareafield时，键盘将自动调用。所以你可以在javascript中创建焦点事件的监听器。然后，我还想监听textfields等何时失去焦点，是否有这样的事件？我想你可以使用blur事件它起作用了。如果你想继续写一个真实的答案，我会给你支票。很高兴听到这个。。。我将把它作为答案发布。我正在使用它来设置焦点。inpMessage.fieldEl.dom.focus（）；它在chrome中工作正常，不在设备中。请注意，这将在键盘动画打开之前触发，因此，如果需要进行定位/布局调整，则可能为时过早。您需要在发布答案之前进行更多测试。当你们点击安卓设备的“后退”按钮时，键盘将被隐藏，但不会触发模糊事件。@devmaniac。。。谢谢你的反馈。我不是说隐藏键盘会调用模糊事件。如果我们对当前聚焦的文本字段调用blur，它将隐藏键盘。正好相反。：）我认为这是最好的答案，因为它允许您避免将此功能与本机层集成紧密耦合。因此，如果此应用程序从PhoneGap移动到仅web，请使用React Native或nativ 
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)