安卓Opera、三星浏览器中VirtualKeyboard.geometrychange事件未触发求助

我实现了一个检测安卓虚拟键盘打开状态的JavaScript脚本，在安卓Chrome 120、安卓Edge 119上可正常运行，但在Opera 79和三星浏览器23中，虽然能成功绑定geometrychange事件监听器，事件却从未触发——尽管MDN标注这两款浏览器支持该API。脚本代码如下：

function detectVirtualKeyboardOpeningViaAPI(e) {
    try {
        console.log('entered keyboard opening listener');

        const { x, y, width, height } = e.target.boundingRect;

        console.log('keyboard bounding rect received via API');

        if (width > 0 && height > 0) {
            console.log('keyboard opening detected via API');
        } else {
            console.log('keyboard has zero dims in API');
        }
    } catch(exc) {
        console.log('detectVirtualKeyboardOpeningViaAPI: ' + exc.message);
    }
}

if ("virtualKeyboard" in navigator) {
    try {
        navigator.virtualKeyboard.overlaysContent = true;      
        navigator.virtualKeyboard.addEventListener("geometrychange", e => detectVirtualKeyboardOpeningViaAPI(e));
        console.log('keyboard: API listener added');
    } catch(exc) {
        console.log('Virtual keyboard available, bind: ' + exc.message);
    }
} else {
    // some fallback code
}

以下是针对该问题的调试步骤和修复方案：

调试步骤 #

• 验证overlaysContent的实际生效状态：
  部分浏览器对navigator.virtualKeyboard.overlaysContent = true的处理存在兼容性延迟，绑定事件前可打印属性值确认是否设置成功：

  console.log('overlaysContent initial value:', navigator.virtualKeyboard.overlaysContent);
  navigator.virtualKeyboard.overlaysContent = true;
  console.log('overlaysContent after setting:', navigator.virtualKeyboard.overlaysContent);
  

  如果设置后值未变化，可能需要页面处于全屏状态、或存在已聚焦的输入元素才能触发API生效。

• 强制触发输入框聚焦测试：
  确保测试时通过聚焦输入元素唤起键盘——部分浏览器仅在用户主动聚焦输入框时才会触发geometrychange事件。可在页面加载后主动创建并聚焦输入框：

  window.addEventListener('load', () => {
    const input = document.createElement('input');
    input.type = 'text';
    document.body.appendChild(input);
    input.focus();
  });
  

• 检查浏览器API的实际实现细节：
  直接打印navigator.virtualKeyboard的完整属性，确认geometrychange事件是否真实存在、boundingRect初始值是否正常：

  console.log('VirtualKeyboard object:', navigator.virtualKeyboard);
  console.log('Initial boundingRect:', navigator.virtualKeyboard.boundingRect);
  

  部分浏览器可能存在API表面支持但内部实现不全的情况，比如boundingRect始终返回0值，导致事件无法触发。

修复方案 #

• 添加输入元素聚焦/失焦的 fallback 监听：
  针对不触发geometrychange的浏览器，结合输入框的focusin/focusout事件与窗口高度变化，间接检测键盘状态：

  let originalWindowHeight = window.innerHeight;
  
  function checkKeyboardViaResize() {
    const currentHeight = window.innerHeight;
    // 安卓键盘唤起通常会让窗口高度减少20%以上，可根据实际场景调整阈值
    if (originalWindowHeight - currentHeight > originalWindowHeight * 0.2) {
      console.log('keyboard opening detected via resize fallback');
    } else {
      console.log('keyboard closed or not opened via resize');
    }
  }
  
  // 绑定输入框聚焦/失焦事件
  document.addEventListener('focusin', (e) => {
    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
      originalWindowHeight = window.innerHeight;
      window.addEventListener('resize', checkKeyboardViaResize);
    }
  });
  
  document.addEventListener('focusout', () => {
    window.removeEventListener('resize', checkKeyboardViaResize);
  });
  

• 延迟绑定API事件：
  部分浏览器需要在页面完全加载或输入元素存在后，才能正常触发geometrychange事件，可将绑定逻辑放在DOMContentLoaded事件中：

  window.addEventListener('DOMContentLoaded', () => {
    if ("virtualKeyboard" in navigator) {
      try {
        navigator.virtualKeyboard.overlaysContent = true;      
        navigator.virtualKeyboard.addEventListener("geometrychange", detectVirtualKeyboardOpeningViaAPI);
        console.log('keyboard: API listener added');
      } catch(exc) {
        console.log('Virtual keyboard available, bind: ' + exc.message);
      }
    }
  });
  

• 检查浏览器隐私/权限设置：
  部分浏览器在隐私模式或特定权限限制下，会禁用Virtual Keyboard API的功能，可尝试在正常模式下测试，或检查是否有相关权限需要手动开启。

内容的提问来源于stack exchange，提问作者NN28