iOS 13.x中document.addEventListener绑定keydown事件失效求助

我来帮你分析下这个问题——iOS 13.x的Safari在键盘事件处理上做了针对性调整，直接导致你的旧代码失效，核心原因有两个：

1. document级别的keydown事件触发限制 #

iOS 13+的Safari加强了事件触发的权限管控：只有当页面存在可聚焦的交互元素（比如<input>、<textarea>，或者设置了contenteditable="true"的元素），且用户已经和页面产生过交互（比如点击过页面），document上的keydown事件才会被触发。如果页面是空白无交互元素的状态，Safari会直接忽略document的键盘事件。

2. keyCode属性已被废弃 #

event.keyCode是一个非标准属性，iOS 13.x的Safari对它的支持已经大幅弱化，现在推荐使用标准的event.key（返回按键对应的字符）或者event.code（返回按键的物理位置标识）来替代。

修复后的代码示例 #

// 先创建一个隐藏的可聚焦input，确保页面能接收键盘事件
const hiddenInput = document.createElement('input');
hiddenInput.style.position = 'fixed';
hiddenInput.style.opacity = '0';
hiddenInput.style.pointerEvents = 'none';
document.body.appendChild(hiddenInput);

// 页面加载完成后让隐藏input获取焦点
window.addEventListener('load', () => {
  hiddenInput.focus();
});

// 绑定keydown事件，兼容新旧环境的写法
document.addEventListener('keydown', function(event) {
  // 兼容旧环境的字符编码获取逻辑
  const charCode = event.keyCode || event.which;
  // 标准的按键字符获取
  const keyContent = event.key;
  alert(`按键字符: ${keyContent}，字符编码: ${charCode}`);
});

额外注意事项 #

• 如果你的页面本身就有可编辑元素（比如用户输入框），可以直接把keydown事件绑定到该元素上，不需要额外创建隐藏input。
• iOS的Safari中，虚拟键盘弹出时，只有当前聚焦的元素能接收键盘事件，所以可以通过事件冒泡机制在document上统一处理，或者直接绑定到目标元素。
• 测试时尽量用真实设备验证，模拟器的键盘事件处理逻辑可能和真实设备有差异。

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