如何通过键盘触发按钮并使其:active伪类样式正常生效

:active 伪类仅在元素被原生交互（鼠标按下不松开、按钮聚焦后按回车/空格）激活时生效，调用 HTMLElement.click() 方法仅会触发绑定的点击事件回调，不会触发浏览器的元素激活状态，因此样式不会展示。

方案1：新增模拟激活类（推荐，兼容性好、逻辑可控） #

修改CSS代码，将激活样式同时绑定到自定义类 #

#btn1:active, #btn1.keydown-active {
  transform: scale(1.1);
}

修改JS代码，触发点击时手动切换状态 #

document.addEventListener("keydown", function(event) {
    // 过滤长按重复触发
    if (event.repeat || event.key !== '1') return;
    const btn = document.getElementById("btn1");
    // 添加激活样式
    btn.classList.add("keydown-active");
    // 触发点击事件
    btn.click();
    // 100ms后移除激活样式，和原生点击的视觉表现一致
    setTimeout(() => {
        btn.classList.remove("keydown-active");
    }, 100);
});

方案2：模拟原生鼠标事件（无需修改CSS） #

通过手动分发mousedown、mouseup事件触发原生的:active状态，不需要调整CSS代码：

document.addEventListener("keydown", function(event) {
    if (event.repeat || event.key !== '1') return;
    const btn = document.getElementById("btn1");
    // 触发鼠标按下事件，激活:active样式
    btn.dispatchEvent(new Event('mousedown'));
    btn.click();
    setTimeout(() => {
        // 触发鼠标松开事件，取消:active样式
        btn.dispatchEvent(new Event('mouseup'));
    }, 100);
});

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