当移动 safari 或 chrome 上的屏幕键盘打开时，是否会触发任何 javascript 事件？答案

【问题标题】：Is there any javascript event fired when the on-screen keyboard on mobile safari or chrome opens?当移动 safari 或 chrome 上的屏幕键盘打开时，是否会触发任何 javascript 事件？
【发布时间】：2015-01-23 19:34:27
【问题描述】：

我尝试对 Web 应用程序中的屏幕键盘做出反应。不幸的是，有些事情使这变得复杂：

首先，应用程序必须在移动平台（平板电脑）和台式机上同等运行。此外，禁止滚动文档/正文，为了更加有趣，平板电脑上必须使用横向模式。

因此，如果有人选择任何输入字段，屏幕键盘会打开并挡住一半页面的视线，因此某些输入变得不可见，我需要更改它。

不幸的是，似乎根本没有触发任何事件，这表明一半的应用程序刚刚变得不可见。我已经检查了滚动和调整大小事件，但它们也没有触发。

当然，只要我确定使用平板电脑，我总是可以做出某种反应。可能 95% 的用户无论如何都不会连接硬件键盘。但是没有更干净的方法吗？

【问题讨论】：

标签： javascript android ios on-screen-keyboard

【解决方案1】：

很遗憾，这里的答案很明确：NO。这里有一些相关问题以及一些进一步的信息和技巧：

screen styling when virtual keyboard is active

iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?

Android/iPhone webkit, event triggered on keyboard pop?

【讨论】：

【解决方案2】：

在 Android 上（抱歉 iOS），当键盘调整页面大小时会触发 resize 事件。在您的窗口上添加一个 onresize 事件处理程序并根据需要调整滚动。

【讨论】：

window.onresize = function(e) { alert("resized"); };这不起作用，还是我错过了什么？ iOS 14.7
无赖@TristanG，看来这只是Android。我更新了答案。当 Apple 赶上来时请告诉我。

【解决方案3】：

您是否尝试过 focus 和 blur 事件？

因此您可以在键盘出现时使用类锁定表单（或其他父元素）的最小高度，这样用户可以在选择输入时滚动触摸屏。

我一直在寻找类似的问题，这个技巧解决了我的问题。 ✌?

*** 编辑 ****

正如@mac 在下面的评论中使用并举例说明我们?

【讨论】：

关闭键盘且没有失去焦点的情况下不会再次触发焦点事件
在我的场景中，我使用焦点输入来暗示键盘是打开的，并使用模糊来暗示它关闭。这对我来说很好。
由于安全原因，您也无法检测到 iframe 中发生的焦点/模糊事件

【解决方案4】：

我有个主意。如果您知道屏幕是移动设备大小，则可以检测输入或文本区域何时触发了 focusin 和 focusout 事件。如果是这样的话，键盘可能已经打开了。

jQuery 示例

$('input[type="text"], input[type="number"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], textarea')
  .on('focusin', function (){
    if(window.innerWidth < 800){
      // do stuff on keyboard opened...
    }
  })
  .on('focusout', function (){
    if(window.innerWidth < 800){
      // revert changes on keyboard closed...
    }
  });

或者使用任意输入类型的高度

let initHeight = window.innerHeight;

$('input, textarea')
  .on('focusin', function (){
    if(window.innerHeight < initHeight && window.innerWidth < 800){
      // do stuff on keyboard opened...
    }
  })
  .on('focusout', function (){
    if(window.innerWidth < 800){
      initHeight = window.innerHeight; // ensure initHeight is still accurate
      // revert changes on keyboard closed...
    }
  });

【讨论】：