如何用键盘和活动触发按钮

Posted 2023-02-22

【中文标题】如何用键盘和活动触发按钮

【英文标题】：How to trigger button with keyboard and active

【发布时间】：2021-12-15 05:34:53

【问题描述】：

我想用键盘和鼠标触发一个按钮。 它可以工作，但是如果我用键盘触发它，则 :active 不会显示。

html

<button id="btn1" onclick="btn1()"> click </button>

CSS

#btn1:active
transform:scale(1.1);

javascript

document.addEventListener("keydown", function(event) 
    if (event.key === '1') 
      document.getElementById("btn1").click();
    
);

【参考方案1】：

您需要为此用例使用 Javascript 添加/删除类。

在keydown eventListner 中添加活动类。为 keyup 添加另一个 eventListner，然后删除该活动类。

document.addEventListener("keydown", function(event) 
      var btn = document.getElementById("btn1");
      btn.click();
      btn.classList.add('active');
);
document.addEventListener("keyup", function(event) 
      var btn = document.getElementById("btn1");
      btn.classList.remove('active');
);

function btn1()
  

#btn1:active
transform:scale(1.1);

.active
transform:scale(1.1);

<button id="btn1" onclick="btn1()"> click </button>

【参考方案2】：

您可以使用 selector.style

并使用 setTimeout() 转换为默认比例

示例：

document.addEventListener("keydown", function(event) 
    if(event.key == "1")
        clicked(document.getElementById("btn1"));
        document.getElementById("btn1").click();
    
);

function clicked(el)
    el.style.transform = "scale(1.1)";
    setTimeout(()=> el.removeAttribute('style'); , 100);

#btn1:active
  transform:scale(1.1);

<button id="btn1" onclick="//btn1()"> click </button>