如何用JavaScript/JQuery阻止Tab键选中浏览器URL栏？

核心方案：阻止Tab键的默认行为 #

Tab键的默认行为是切换页面焦点，当页面内无可用聚焦元素时，Chrome会自动将焦点转移到地址栏。只需在Tab键的keydown事件中调用event.preventDefault()，就能阻止这一默认行为，同时保留排行榜切换逻辑。

原生JavaScript修改方案 #

修正后的完整代码 #

const KEY_TAB = 'tab';
const keysPressed = {};
const leaderboard = document.getElementById('leaderboard');

// 封装排行榜切换逻辑
function toggleLeaderboard() {
    if (leaderboard.style.display === 'none') {
        $(leaderboard).fadeIn(100);
    } else {
        $(leaderboard).fadeOut(100);
    }
}

document.addEventListener('keydown', (event) => {
    const key = event.key.toLowerCase();
    keysPressed[key] = true;

    // 检测Tab键并阻止默认行为
    if (key === KEY_TAB) {
        event.preventDefault();
        toggleLeaderboard();
        keysPressed[key] = false; // 重置按键状态
    }
}, false);

document.addEventListener('keyup', (event) => {
    keysPressed[event.key.toLowerCase()] = false;
}, false);

关键修改点 #

• 定义KEY_TAB = 'tab'，匹配event.key.toLowerCase()的返回值
• 在keydown事件中拦截Tab键，调用event.preventDefault()阻止地址栏聚焦
• 将排行榜切换逻辑封装为独立函数，代码结构更清晰

jQuery简化方案 #

如果使用jQuery，可直接在事件监听中完成所有逻辑，无需维护keysPressed对象：

$(document).keydown(function(event) {
    if (event.key.toLowerCase() === 'tab') {
        event.preventDefault(); // 阻止地址栏聚焦
        const leaderboard = $('#leaderboard');
        // 切换显示状态
        leaderboard.is(':hidden') ? leaderboard.fadeIn(100) : leaderboard.fadeOut(100);
    }
});

注意事项 #

• 确保代码在页面DOM加载完成后执行（可包裹在DOMContentLoaded事件中）
• 如果游戏有其他需要Tab键的场景，可添加额外判断条件（比如仅当游戏画布处于焦点时阻止默认行为）

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