How to know which key was pressed

7

I need that every time a key is pressed, a function will be executed, which will vary depending on the key that was pressed. So I need to know what key was pressed.

This is what I have so far:

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

But I can not get even the value of the key pressed.

    
asked by Theia 30.06.2017 в 16:30
source

4 answers

9

You could do something like the following:

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);"/>

The first thing we do is include the event variable in the OnKeyDown event. This serves so that at the moment in which the event is executed, this can have access to the respective information to the key.

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

The second thing is to use this instruction:

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

This allows us to obtain the code of the key pressed. We use which because the parameter keyCode may not work in all browsers.

If you want to know about the other keys (Escape, Enter, Shift, Etc), you can look this page , here are examples of the codes of the keys.

About the use of the which and keyCode instruction you can see this link , where the why is indicated.

    
answered by 30.06.2017 / 16:54
source
3

event.key is easier

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

Mozilla Documentation

    
answered by 12.10.2017 в 00:58
1

Short answer

  • Instead of using the global property event , declaring it as an argument to your function.

  • Instead of keyCode use key for the character keys, shiftKey , ctrlKey , altKey and metaKey for the uppercase keys, control, alt and Windows / Commmand ( Mac) respectively.

  • Explanation

    In Firefox for Windows the question code does not work, it returns

      

    "ReferenceError: event is not defined"

    This happens because in Internet Explorer and Chrome event is a global property but it does not happen in Firefox.

    On the other hand, according to link both keyCode as which are obsolete properties and instead the use of key is recommended. The properties shiftKey , ctrlKey , altKey and metaKey will return true if the corresponding key has been pressed.

    Apart from being obsolete, not all browsers are compatible with these properties.

    An additional alternative is the use of a library such as jQuery which aims to take charge of managing the variants of the different browsers.

    Example using "pure" JavaScript

    In the following example, the record of the keys pressed is added to the element <input> and the result is printed to an element <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>

    Putting "pure" is because the KeyboardEvent object is not an object of the JavaScript language specification but is part of the Web APIs.

    Example using jQuery

    One of the purposes of jQuery is to support multiple browsers in a standardized way. Below is an example in which the recommendations mentioned in the short answer section apply, the declaration of the variable to which the event object will be assigned and the use of the key property.

    $('#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>
        
    answered by 06.02.2018 в 03:20
    0

    If you are using pure javascript (without jquery) you have to do some validations before.

    Your input has to carry the parameter event because in FireFox the event is not global and is passed as a parameter

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

    In your function you have to validate first where the event comes from, if it comes in the parameters (FireFox) or is in the global scope (IE). Then you have to get the value of the key pressed with keyCode (IE and FF) or wich (I think Netscape and 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);
     }
    

    Note that the value of key will be the ASCII code of the key pressed.

        
    answered by 30.06.2017 в 17:07