如何在根据窗口宽度/高度自动调整大小的网站中使用手机/手机键盘

How to work around the mobile/phone keyboard in a website that resizes automatically based on window width/height

本文关键字：手机 网站 键盘 调整 窗口 高度      更新时间：2023-09-26

我制作的Web应用程序经常通过（最近）CSS转换根据窗口调整大小。

对于台式电脑来说，这没什么大不了的。我只是每 50 毫秒运行一次调整大小测试代码，检查 window.innerWidth 和 window.innerHeight。（我在这里不使用"调整大小"事件，因为当用户调整窗口大小时，该事件可能会运行得太快/次数太多。

在手机上，我同时使用"调整大小"和"方向更改"事件。由于各种Android（Chrome/webview）/iOS错误，有时需要调整大小事件。效果很好。

问题是：众所周知，目前没有办法明确检测一些不同的仅限手机的事件，例如虚拟键盘弹出和弹出。因此，当弹出键盘时，这会触发 resize 事件，这会触发我的 resize 例程并导致应用程序窗口变得非常小。

"因此，当键盘弹出时，这会触发调整大小事件，这会触发我的调整大小例程并导致应用程序窗口变得非常小。"

解决此问题的一种方法是检测模糊并专注于文本/密码输入。

子问题：我们还需要防止用户在键盘可见时重新定向其设备的可能性 - 从而向调整大小例程发送不正确的数据。这可以通过在发生方向更改事件时模糊输入来处理。

示例代码：

if (gs.is_phone_or_tablet) {
 window.keyboard_is_visible = false
 $(document.body).on('focus', 'input[type="text"], input[type="password"]', function () {window.keyboard_is_visible = true})
 $(document.body).on('blur' , 'input[type="text"], input[type="password"]', function () {window.keyboard_is_visible = false})
 var hide_keyboard = function () {
  if (document.activeElement == document.body) return
  document.activeElement.blur ()
  window.keyboard_is_visible = false
 }
 //window.addEventListener('resize'           , hide_keyboard) // <-- for Webview <= 4.3 only..
 window.addEventListener('orientationchange', hide_keyboard)
}
相关文章：