输入状态下禁用D键触发深色模式：表单输入时屏蔽快捷键功能

需求说明 #

按下D键可切换页面深色模式，但当用户在输入框、表单等可输入区域填写内容时，按下D键不应触发深色模式切换。

修改后的代码 #

let DarkMode = false;

function toggleDarkMode() {
    var element = document.body;

    element.classList.toggle("darkmode");
    DarkMode = !DarkMode;

    if (DarkMode) {
        document.getElementById("toogle-checkbox").checked = false;
        Cookies.set("DarkMode", "Off");
    } else {
        document.getElementById("toogle-checkbox").checked = true;
        Cookies.remove("DarkMode");
    }
}

let keyPress = 68;
window.addEventListener("keydown", checkKeyPress);

function checkKeyPress(key) {
    // 获取当前获得焦点的元素
    const activeElement = document.activeElement;
    // 判断是否处于可输入元素中（输入框、文本域、下拉框或可编辑元素）
    const isInInput = ['INPUT', 'TEXTAREA', 'SELECT'].includes(activeElement.tagName) || 
                      activeElement.isContentEditable;

    // 仅当按下的是D键且不在输入状态时，才触发深色模式切换
    if (key.keyCode === keyPress && !isInInput) {
        play('click-sound');
        Cookies.set("DarkMode", "Off");
        toggleDarkMode();
    }
}

var DarkCookie = Cookies.get("DarkMode");
if (DarkCookie == 'Off') {
    CookieDarkMode = true;
    Darkmode = true;
    toggleDarkMode();
}

关键改动点 #

在键盘事件处理函数checkKeyPress里加了焦点元素判断逻辑：

1. 用document.activeElement拿到当前获得焦点的元素
2. 检查该元素是不是输入类元素——包括INPUT/TEXTAREA/SELECT标签，或者设置了contenteditable="true"的可编辑元素
3. 只有按下D键且当前不在输入状态时，才执行深色模式切换的操作

这样用户在填表单、输入内容时按D键就不会误触发模式切换，其他场景下的快捷键功能也不受影响。

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