Element.ALLOW_KEYBOARD_INPUT为何变为undefined？全屏键盘事件失效问询

核心结论 #

Element.ALLOW_KEYBOARD_INPUT这个常量在现代Chrome中已被移除，且标准全屏API的键盘事件支持逻辑早已变更，这就是你遇到问题的根本原因。

详细说明 #

• 常量已被废弃移除：早期WebKit内核的全屏API曾引入Element.ALLOW_KEYBOARD_INPUT作为参数，用于允许全屏元素接收键盘事件，但这属于非标准实现。在Chrome逐步对齐W3C标准全屏API的过程中，该特性被废弃，从Chrome较早期版本（约Chrome 70+）开始就不再存在，所以你在Chrome 108中看到它是undefined是正常情况。
• 当前键盘事件支持逻辑：现在标准全屏API（requestFullscreen()，无需webkit前缀）默认允许全屏元素接收键盘事件，但有几个关键限制：
  • 全屏请求必须由用户主动交互触发（比如点击、按键操作），不能通过页面加载时的自动代码执行，这是浏览器的安全策略要求。
  • 若keydown事件监听器未触发，先检查监听器是否正确绑定到全屏元素或其内部可交互元素上，是否存在其他代码阻止事件冒泡或默认行为。
  • 系统级快捷键（如Alt+Tab、F11等）会被浏览器拦截，不会传递给页面元素。
• 正确用法示例：现在应使用标准全屏API，无需额外参数：

  // 绑定用户点击事件触发全屏（必须由用户交互触发）
  document.querySelector('#myElement').addEventListener('click', async () => {
    const element = document.querySelector('#myElement');
    try {
      await element.requestFullscreen();
      // 全屏成功后绑定键盘事件
      element.addEventListener('keydown', (e) => {
        console.log('键盘事件触发:', e.key);
      });
    } catch (err) {
      console.error('全屏失败:', err);
    }
  });
  

排查建议 #

1. 确认全屏请求是由用户交互（点击、按键等）触发，而非自动执行的代码。
2. 检查keydown事件监听器是否在全屏状态生效后绑定，或是否绑定到了正确的目标元素上。
3. 替换带webkit前缀的webkitRequestFullscreen()为标准requestFullscreen()，现代Chrome已完全支持标准API。

内容的提问来源于stack exchange，提问作者Bart van Heukelom