9

Necesito que cada vez que se presione una tecla, se ejecute una función, la cual variará en dependencia de la tecla que fue presionada. Por lo que necesito saber que tecla fue presionada.

Esto es lo que tengo hasta el momento:

function onKeyDownHandler() {
     console.log("key pressed ",  String.fromCharCode(event.keyCode));
}
<input onkeydown="onKeyDownHandler();"/>

Pero no logro obtener aun el valor de la tecla presionada.

2
  • El código a mi me funciona bien (Chrome para Windows). ¿A qué te refieres con que no logras obtener la letra presionada? ¿Qué sistema operativo y navegador estás usando?
    – Rubén
    Commented el 6 feb. 2018 a las 2:16
  • Recién probé en Firefox para Windows y me devuelve "ReferenceError: event is not defined"
    – Rubén
    Commented el 6 feb. 2018 a las 2:47

4 respuestas 4

15

Podrias hacer algo como lo siguiente:

function onKeyDownHandler(event) {

    var codigo = event.which || event.keyCode;

    console.log("Presionada: " + codigo);
     
    if(codigo === 13){
      console.log("Tecla ENTER");
    }

    if(codigo >= 65 && codigo <= 90){
      console.log(String.fromCharCode(codigo));
    }

     
}
<input onkeydown="onKeyDownHandler(event);"/>

Lo primero que hacemos es incluir la variable event en el evento OnKeyDown. Esto sirve para que en el momento en que el evento se ejecute, este pueda tener acceso a la informacion respectiva a la tecla.

<input onkeydown="onKeyDownHandler(event);"/>

Lo segundo es usar esta instruccion:

var codigo = event.which || event.keyCode;

Esta nos permite obtener el codigo de la tecla presionada. Usamos which debido a que el parametro keyCode puede no funcionar en todos los navegadores.

Si quieres conocer al respecto de las otras teclas (Escape, Enter, Shift, Etc), puedes mirar esta pagina, aqui se incluyen ejemplos de los codigos de las teclas.

Acerca del uso de la instruccion which y keyCode puedes mirar este enlace, en donde se indica el porque.

7
  • Es event.keyCode. A mi tambien me paso
    – Theia
    Commented el 30 jun. 2017 a las 14:56
  • Para saber otro tipo de caracteres, como enter, backspace, ctrl y alt?
    – Theia
    Commented el 30 jun. 2017 a las 14:57
  • 1
    Mira el ejemplo que he agregado Commented el 30 jun. 2017 a las 14:58
  • 2
    @Theia Para permitir la portabilidad entre navegadores Commented el 30 jun. 2017 a las 15:01
  • 1
    Es culpa del IE Commented el 30 jun. 2017 a las 15:02
3

event.key es más fácil

function onKeyDown(event) {
    const key = event.key; // "A", "1", "Enter", "ArrowRight"...
    console.log("Presionada: " + key);
});

Documentación de Mozilla

1

Si estas usando javascript puro (sin jquery) tienes que hacer algunas validaciones antes.

Tu input tiene que llevar el parámetro event ya que en FireFox el event no es global y se pasa como parámetro

<input onkeydown="onKeyDownHandler(event);"/>

En tu función tienes que validar primero de donde viene el event, si viene en los parametros (FireFox) o está en el ámbito global (IE). Despues tienes que obtener el valor de la tecla presionada con keyCode (IE y FF) o wich (creo Netscape y Opera).

function onKeyDownHandler(evt) {
    var e = evt || window.event;        //Obtenemos el event
    var key = evt.keyCode || evt.which; //Tecla presionada
     console.log("key pressed: " + key);
 }

Ten encuenta que el valor de key será el código ASCII de la tecla presionada.

0
1

Respuesta corta

  1. En lugar de usar la propiead global event declárala como argumento de tu función.

  2. En lugar de keyCode usa key para las teclas de caracteres, shiftKey, ctrlKey, altKey y metaKeypara las teclas mayúsculas, control, alt y Windows / Commmand (Mac) respectivamente.

Explicación

En Firefox para Windows el código de la pregunta no funciona, devuelve

"ReferenceError: event is not defined"

Esto ocurre porque en Internet Explorer y Chrome event es una propiedad global pero no ocurre así en Firefox.

Por otro lado, de acuerdo a https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent tanto keyCode como which son propiedades obsoletas y en su lugar se recomienda el uso de key. Las propiedades shiftKey, ctrlKey, altKey y metaKey devolverán true si la tecla correspondiente ha sido oprimida.

Aparte de que sean obsoletas no todos los navegadores son compatibles con dichas propiedades.

Una alternativa adicional es el uso de una librería como jQuery la cual pretende hacerse cargo de manejar las variantes de los distintos navegadores.

Ejemplo usando JavaScript "puro"

En el siguiente ejemplo se agrega el registro de las teclas presionadas al elemento <input> y se imprime el resultado a un elemento <div>.

var entrada = document.getElementById('entrada');
entrada.addEventListener('keypress',anexar);
var borrar = document.getElementById('borrar');
borrar.addEventListener('click',limpiar);
var salida = document.getElementById('salida');

function anexar(e){
  salida.innerHTML += e.key + '<br />';
}

function limpiar(e){
  entrada.value = '';
  salida.innerHTML = '';
}
<input id="entrada"> <input type="button" id="borrar" value="Borrar">
<div id="salida"></div>

Lo de poner "puro" es porque el objeto KeyboardEvent no es un objeto de la especificación del lenguaje JavaScript sino que es parte de las Web APIs.

Ejemplo usando jQuery

Una de las finalidades de jQuery es dar soporte a múltiples navegadores de forma estandarizada. A continuación se muestra un ejemplo en el que se aplican las reomendaciones mencionadas en la sección respuesta corta, la declaración de la variable a la que se asignará el objeto evento y el uso de la propiedad key.

$('#entrada').bind('keypress', function(e) {
  $('#salida').append(e.key + '<br />');
});
$('#borrar').bind('click',function(){
  $('#entrada').val('');
  $('#salida').text('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="entrada"> <input type="button" id="borrar" value="Borrar">
<div id="salida"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.