如何使用JavaScript在iOS上捕获隐藏键盘事件

Question

当iPad虚拟键盘的隐藏按钮被按下时，我需要调整网页内容的大小。哪个JavaScript事件会在键盘隐藏时启动？

答案：您需要使用“blur”事件来检测虚拟键盘何时隐藏。

- Marius

---

可能是重复的问题：iPad Web 应用程序：如何在 Safari 中使用 JavaScript 检测虚拟键盘？ - mplungjan

Answer 1

您可以使用focusout事件。它类似于模糊，但是冒泡。当键盘关闭时（当然也有其他情况），它将触发。在Safari和Chrome中，该事件只能使用addEventListener进行注册，而不能使用旧方法。以下是我用来在键盘关闭后恢复Phonegap应用程序的示例。

 document.addEventListener('focusout', function(e) {window.scrollTo(0, 0)});

如未添加此代码片段，页面刷新前应用程序容器将保持在向上滚动的位置。

- Per Quested Aronsson

---

哈，这正是我所遇到的情况，“在键盘消失后恢复 Phonegap 应用程序”。 - ganders

这个EventListener帮助我解决了在ExtJS 5中遇到的问题；在Safari中，IOS键盘隐藏后，ExtJS页面内容仍会保持向下滚动一段时间。这是一个问题，因为在ExtJS 5.0.1中，触摸界面上禁用了滚动。因此，我使用了这个事件来触发对ExtJS视图容器的doLayout()操作，使容器再次适应屏幕范围。 - Jasper

这个在CrossBrowserTesting的Chrome 41 / iOS 6模拟器上经常无法正常工作。 - Dan Dascalescu

如果只有一个输入字段，这很好用，但如果有多个输入字段，则不适用。如果用户单击/聚焦于不同的输入字段，则窗口将滚动到顶部，并使用户想知道他们单击的输入字段发生了什么事情。 - kenecaswell

@kenecaswell：你可以使scrollTo的位置动态化。它不必总是滚动到0。 - Per Quested Aronsson

问题在于很多其他的事情也可能触发这个事件，因此当不仅仅是键盘关闭时，你会在其他情况下触发你的事件... - Will P.

Answer 2

这里是一个好的起点 iPad上支持的Javascript事件列表

该链接导向 https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW5

但是它并没有列出此内容。

这个提供了一个解决方法 iPad Web应用程序：在Safari中使用JavaScript检测虚拟键盘？

- mplungjan

---

谢谢，我认为我会监听onblur事件。因为当虚拟键盘关闭时，输入框会失去焦点。 - Marius

@Marius 当键盘隐藏按钮被按下时，注意力不会松懈。 - Vijay Shegokar

Answer 3

    window.onblur = function(e) {
      window.scrollTo(0, 1);
    };

这是我的解决方案，如果有人按下了iOS 14.7的“closekeyboard”，它可以正常工作。

- Tristan G