JavaScript教程：优化键盘事件，防止全局快捷键在文本输入时误触发

let DarkMode = false;
const keyPress = 68; // 'D' 键的 keyCode

function toggleDarkMode() {
    const element = document.body;
    element.classList.toggle("darkmode");
    DarkMode = !DarkMode;

    // 假设这里还有其他逻辑，例如设置/移除Cookie，更新UI状态等
    if (DarkMode) {
        document.getElementById("toogle-checkbox").checked = false;
        Cookies.set("DarkMode", "Off");
    } else {
        document.getElementById("toogle-checkbox").checked = true;
        Cookies.remove("DarkMode");
    }
}

// 监听全局键盘按下事件
window.addEventListener("keydown", checkKeyPress);

function checkKeyPress(key) {
    if (key.keyCode === keyPress) {
        // play('click-sound'); // 假设有音效播放
        // Cookies.set("DarkMode", "Off"); // 假设有Cookie操作
        toggleDarkMode();
    }
}

// 页面加载时根据Cookie设置深色模式
var DarkCookie = Cookies.get("DarkMode");
if (DarkCookie === 'Off') {
    // 这里的逻辑可能需要调整以匹配 toggleDarkMode 的状态管理
    // 例如，确保 DarkMode 变量的初始值正确，然后调用 toggleDarkMode
    if (!DarkMode) { // 避免重复切换
        toggleDarkMode();
    }
}

function checkKeyPress(key) {
    // 如果 isComposing 为 true，表示正在进行输入法合成，此时不应触发快捷键
    if (!key.isComposing && key.keyCode === keyPress) {
        // play('click-sound');
        // Cookies.set("DarkMode", "Off");
        toggleDarkMode();
    }
}

function checkKeyPress(event) { // 将参数名改为 event 更具通用性
    // 检查事件目标是否为 input 或 textarea 元素
    // 如果不是文本输入元素，才触发快捷键
    if (!event.target.matches("input, textarea") && event.keyCode === keyPress) {
        // play('click-sound');
        // Cookies.set("DarkMode", "Off");
        toggleDarkMode();
    }
}

function checkKeyPress(event) {
    // 判断事件目标是否为文本输入元素（input, textarea, 或 contenteditable）
    const isTextInputElement = event.target.matches("input, textarea, [contenteditable='true']");

    // 只有当：
    // 1. 事件不是发生在文本输入元素上
    // 2. 且不是输入法合成状态
    // 3. 且按下的键是预设的快捷键
    // 才触发全局快捷键功能
    if (!isTextInputElement && !event.isComposing && event.keyCode === keyPress) {
        // play('click-sound');
        // Cookies.set("DarkMode", "Off");
        toggleDarkMode();
    }
}