如何使用 JavaScript 检测虚拟键盘？

给定一个 HTML 文档，任务是检测虚拟键盘是否在设备屏幕上弹出。虚拟键盘是一种无需使用物理键盘即可帮助输入字符的工具。它广泛用于触摸屏设备。

方法：不幸的是，目前没有直接的方法可以使用 JavaScript 检测屏幕上是否出现虚拟键盘。但是，我们可以使用一些间接方法来检测虚拟键盘何时出现在设备屏幕上。

1. 在 JavaScript 中使用“调整大小”事件监听器

   如果屏幕上出现虚拟键盘，屏幕的高度就会改变。因此，我们可以使用 JavaScript 中可用的“resize”事件侦听器来侦听此事件，以检测屏幕高度的变化。这个事件监听器可以直接添加到窗口对象中。

2. 使用 CSS 媒体查询

   在少数情况下，当屏幕上弹出虚拟键盘时，屏幕的方向会从纵向变为横向。因此，利用这一事实，我们可以使用 CSS “orientation: Landscape” 媒体查询来检测屏幕方向的变化。

例子：

HTML

  
    
    
    Document
  
    
      /*media query to detect orientation change*/
      @media screen and (orientation: landscape) {
        h1 {
          color: green;
        }
      }
    
  
  
    Change orientation/screen height
  
    
      const text = document.querySelector("#text");
  
// resize event listener to detect change in screen height
      window.addEventListener("resize", (e) => {
        text.innerHTML = "Virtual keyboard detected!!!";
      });
    
  

输出：

检测屏幕高度变化时

检测屏幕方向何时改变