Pregunta ¿Cómo saber qué tecla de carácter se presiona?


Me gustaría saber qué tecla de carácter se presiona en una forma compatible con varios navegadores en javascript puro.


75
2017-12-04 12:17


origen


Respuestas:


JavaScript "claro":

<script type="text/javascript">
  function myKeyPress(e){
    var keynum;

    if(window.event) { // IE                    
      keynum = e.keyCode;
    } else if(e.which){ // Netscape/Firefox/Opera                   
      keynum = e.which;
    }

    alert(String.fromCharCode(keynum));
  }
</script>

<form>
  <input type="text" onkeypress="return myKeyPress(event)" />
</form>

JQuery:

$(document).keypress(function(event){
  alert(String.fromCharCode(event.which)); 
});

128
2017-12-04 12:36



Hay un millón de duplicados de esta pregunta aquí, pero aquí va otra vez de todos modos:

document.onkeypress = function(evt) {
    evt = evt || window.event;
    var charCode = evt.keyCode || evt.which;
    var charStr = String.fromCharCode(charCode);
    alert(charStr);
};

La mejor referencia sobre eventos clave que he visto es http://unixpapa.com/js/key.html.


27
2017-12-04 12:41



Más reciente y mucho más limpio: uso event.key. ¡No más códigos de números arbitrarios!

node.addEventListener('keydown', function(event) {
    const key = event.key; // "a", "1", "Shift", etc.
});

Si quiere asegurarse de que solo se ingresen caracteres individuales, verifique key.length === 1, o que es uno de los personajes que esperas.

Documentos de Mozilla

Navegadores compatibles


5
2017-09-05 18:03



Echa un vistazo a este sitio para detectar inconsistencias cruzadas en el navegador http://www.quirksmode.org/js/keys.html


2
2017-12-04 12:26



Usa este:

function onKeyPress(evt){
  evt = (evt) ? evt : (window.event) ? event : null;
  if (evt)
  {
    var charCode = (evt.charCode) ? evt.charCode :((evt.keyCode) ? evt.keyCode :((evt.which) ? evt.which : 0));
    if (charCode == 13) 
        alert('User pressed Enter');
  }
}

1
2017-12-04 12:31



**check this out** 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(document).keypress(function(e)
        {

            var keynum;
            if(window.event)
            { // IE                 
                keynum = e.keyCode;
            }
                else if(e.which)
                    { 
                    // Netscape/Firefox/Opera                   
                    keynum = e.which;
                    }
                    alert(String.fromCharCode(keynum));
                    var unicode=e.keyCode? e.keyCode : e.charCode;
                    alert(unicode);
        });
});  

</script>
</head>
<body>

<input type="text"></input>
</body>
</html>

1
2017-12-08 12:31



Una de mis bibliotecas favoritas para hacer esto de una manera sofisticada es Ratonera.

Viene provisto de una variedad de complementos, uno de los cuales es el record complemento que puede identificar una secuencia de teclas presionadas.

Ejemplo:

<script>
    function recordSequence() {
        Mousetrap.record(function(sequence) {
            // sequence is an array like ['ctrl+k', 'c']
            alert('You pressed: ' + sequence.join(' '));
        });
    }
</script>


<button onclick="recordSequence()">Record</button>

1
2017-11-13 13:47



document.onkeypress = function(event){
    alert(event.key)
}

-2
2018-03-07 19:10