Estoy usando un eventListener para detectar opciones numéricas en mi aplicación vue:
window.addEventListener("keydown", function (e) { switch (e.key) { case 1: // do stuff break; case 2: // do other stuff } } Como tengo más de 9 opciones, me preguntaba cuál sería la forma más sensata de diferenciar si el usuario está ingresando un número de uno o dos dígitos (por ejemplo, 1 contra 11 ).
Terminé adaptando la solución descrita en esta publicación de blog , presionando todas las pulsaciones de teclas en una matriz, que se borra si no hay entrada después de 1 segundo.
let keys = []; let timeout = null; window.addEventListener("keydown", function (e) { keys.push(e.key); clearTimeout(timeout); timeout = setTimeout(function () { let input = parseInt(keys.join("")); switch (input) { case 1: // do stuff break; case 11: // do other stuff } keys = []; }, 1000); });La declaración de cambio está haciendo una conversión de tipo implícita ya que e.key es una cadena y los especificadores de caso de cambio son números. Si no tiene más de 35 opciones, el uso de 36 dígitos de base ('1'-'9' y 'a'-'z') podría ser la solución más fácil, junto con la construcción de la declaración de cambio a lo largo de las líneas de
switch( e.key.toLowerCase() { case '1': ... break; . . . case 'z': ... break; }Dudaría antes de decirles a los usuarios que deben presionar un segundo dígito dentro de los 500 ms y esperar ese tiempo antes de que se reconozca la primera tecla que presionaron. :-)