Windows与Ubuntu右Alt键差异致JS全屏快捷键异常问题

问题出在Windows 11的右Alt键（AltGr）在部分场景下，无法被event.altKey正确识别为修饰键，导致你的判断逻辑失效。以下是两种可行的修复方案：

方案一：检测AltGraph修饰状态（推荐） #

浏览器提供了event.getModifierState('AltGraph')方法，专门用于识别AltGr键（即Windows的右Alt）的按下状态。将其加入修饰键判断逻辑即可：

function shortcutsHandler(event) {
    const isModifierKeyHeld = event.ctrlKey || event.altKey || event.metaKey 
        || event.shiftKey || event.getModifierState('AltGraph');

    if (event.key === 'f' && !isModifierKeyHeld) {
        enterFullScreen();
        event.preventDefault(); // 可选：阻止浏览器默认的F键查找行为
        return;
    }
}

方案二：直接检测左右Alt键 #

部分浏览器支持event.altLeft和event.altRight属性，可直接判断是否有任意Alt键被按下：

function shortcutsHandler(event) {
    const isModifierKeyHeld = event.ctrlKey || event.altLeft || event.altRight 
        || event.metaKey || event.shiftKey;

    if (event.key === 'f' && !isModifierKeyHeld) {
        enterFullScreen();
        event.preventDefault();
        return;
    }
}

补充说明 #

• 优先选择方案一，因为getModifierState('AltGraph')的兼容性更好，覆盖更多键盘布局场景。
• 添加event.preventDefault()可以避免触发浏览器默认的F键行为（如页面查找），提升功能的独立性。

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