Quiero activar un botón con el teclado y con el mouse. Funciona, pero el :active no se muestra si lo activo con el teclado.
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(); } });Deberá usar la clase de agregar/eliminar Javascript para este caso de uso.
En el keydown eventListner agregue la clase activa. Agregue otro eventListner para keyup y luego elimine esa clase activa.
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>Puedes usar selector.style
y use setTimeout() para pasar a la escala predeterminada
Ejemplo :
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>