如何通过JavaScript监听全局键盘输入触发指定字符串弹窗？

问题分析 #

你的代码无法生效的核心原因是：keydown事件每次只捕获单个按键的输入，event.key只会返回当前按下的单个字符（比如按下Shift+S时返回"S"），不可能出现你写的"Shift + S + h + o + w + Shift + M + e + Shift + P + o + p + u + p"这种多个按键拼接的字符串，所以switch的这个case永远不会被命中。

最优实现思路 #

要实现连续输入指定字符串触发弹窗，需要：

• 维护一个输入缓冲区，记录用户最近输入的字符序列
• 每次按键时更新缓冲区，只保留和目标字符串长度一致的最近字符（避免缓冲区无限增长）
• 对比缓冲区和目标字符串，完全匹配则触发弹窗
• 可选：添加超时机制，若用户长时间未输入，清空缓冲区（防止旧输入干扰）

完整代码示例 #

// 目标触发字符串
const triggerString = "ShowMePopup";
// 输入缓冲区，存储最近输入的字符
let inputBuffer = "";
// 超时定时器ID，用于清空缓冲区
let timeoutId = null;

window.addEventListener("keydown", function(event) {
    // 忽略系统默认行为已被阻止的事件
    if (event.defaultPrevented) return;

    // 只记录可打印字符（过滤Shift、Ctrl等修饰键）
    if (event.key.length === 1) {
        // 更新缓冲区：添加当前字符，截断到目标字符串长度
        inputBuffer += event.key;
        inputBuffer = inputBuffer.slice(-triggerString.length);

        // 清除之前的超时定时器，重新计时
        if (timeoutId) clearTimeout(timeoutId);
        // 5秒未输入则清空缓冲区（可根据需求调整时长）
        timeoutId = setTimeout(() => {
            inputBuffer = "";
        }, 5000);

        // 检查是否匹配目标字符串
        if (inputBuffer === triggerString) {
            alert("Secret Popup");
            // 匹配后清空缓冲区，避免重复触发
            inputBuffer = "";
            clearTimeout(timeoutId);
        }
    }
});

代码说明 #

• 输入缓冲区控制：每次只保留和目标字符串长度相同的最近字符，避免内存占用过大
• 过滤修饰键：通过event.key.length === 1判断只记录可打印字符，忽略Shift、Alt等不产生字符的按键
• 超时重置：用户5秒未输入则清空缓冲区，防止之前输入的字符残留导致误触发
• 触发后重置：弹窗触发后立即清空缓冲区，避免用户继续输入时重复触发

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