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

118

Me gustaría saber qué tecla de carácter se presiona de una manera compatible con todos los navegadores en Javascript puro.

javascript dom-events keypress

— xXx
fuente

1

¿No son todas estas respuestas para la pregunta "qué tecla se presionó?" ¿Qué sucede si, mientras se ejecuta, el código JavaScript quiere saber si una tecla del teclado está presionada actualmente?

— mwardm

2

event.keyle dará directamente el carácter prensado

— Gibolt

158

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)); 
});

— Coyod
fuente

6

esto funciona bien para caracteres alfabéticos, pero ¿qué pasa con los puntos / corchetes y otros símbolos tipográficos?

— VoVaVc

6

@VoVaVc: también funciona para ellos. Lo crucial es usar el keypressevento, que le da un código de carácter, en lugar de keyupo keydownque le da un código clave.

— Tim Down

2

@aljgom, e.keytodavía no tiene soporte completo para navegadores.

— Andy Mercer

1

¡No funciona para símbolos que tienes que presionar mayúsculas para hacer, como!

— Curtis

5

La clave @AndyMercer ahora es compatible con todos los navegadores principales: developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/…

— Ray

34

Hay un millón de duplicados de esta pregunta aquí, pero aquí va 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 .

— Tim Down
fuente

23

Más reciente y mucho más limpio: uso event.key. ¡No más códigos numéricos arbitrarios!

NOTA: Las propiedades antiguas ( .keyCodey .which) están obsoletas.

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

Si desea asegurarse de que solo se ingresen caracteres individuales, verifique key.length === 1que sea uno de los caracteres que espera.

Documentos de Mozilla

Navegadores compatibles

— Gibolt
fuente

¿Es esto para node.js?

— merrybot

No, nodo solo significa cualquier elemento DOM. Si tuviera Node.js conectándose a una interfaz de usuario, supongo que funcionaría

— Gibolt

keydown para algunos dispositivos móviles no funciona, devuelve undefine

— Angelotti

4

Tratar:

<table>
<tr><td>Key:</td><td id="key"></td></tr>
<tr><td>Key Code:</td><td id="keyCode"></td></tr>
<tr><td>Event Code:</td><td id="eventCode"></td></tr>
</table>
<script type="text/javascript">
window.addEventListener("keydown", function (e) {
  //tested in IE/Chrome/Firefox
  document.getElementById("key").innerHTML = e.key;
  document.getElementById("keyCode").innerHTML = e.keyCode;
  document.getElementById("eventCode").innerHTML = e.code;
})
</script>

Expandir fragmento

* Nota: esto funciona en "Ejecutar fragmento de código"

Este sitio web hace lo mismo que mi código anterior: Keycode.info

— lewdev
fuente

1

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');
  }
}

— JCasso
fuente

1

**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>

— kki3908050
fuente

1

¿No es esto un duplicado casi exacto de la respuesta de @ Coyod de 2009?

— Chris F Carroll

1

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

Viene con una variedad de complementos, uno de los cuales es el recordcomplemento 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>

— momento bipolar
fuente

@DanLowe Acabo de agregar un fragmento.

— dipole_moment

TypeError no detectado: Mousetrap.record no es una función en recordSequence (****. Html: 12) en HTMLButtonElement.onclick (****. Html: 20)

— Irrmich

-2

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

— gomozor
fuente