¿Cómo diferenciar entre las teclas 'Enter' y 'Return' en Javascript?

Question

Algunas aplicaciones de escritorio tratan la tecla 'retorno de carro' y la tecla 'intro' del teclado numérico de manera diferente. Me he dado cuenta de que estas dos claves generan el mismo código de clave (13) en Javascript (jQuery).

¿Son convertidos a ser igual en el entorno del navegador, o es posible diferenciar entre ellos (es decir. Hacer que el CR crea una nueva línea en un área de texto, y la tecla 'Enter' presentar su forma?

tratado

Answer 1

Ver ene Wolters' en Javascript Madness: Keyboard Events.

Enter y Numpad Enter ambos dan el mismo código clave, es decir, 13, ya que los navegadores no diferencian entre las dos llaves. para ser honesto, ni la mayoría de los entornos. es posible diferenciar entre ellos usando la API de Windows (por ejemplo), pero se requiere un esfuerzo adicional para hacerlo. Sin embargo, esto queda fuera del alcance de la abstra del navegador. ction.

ACTUALIZACIÓN

Como Bill Thorne razón mentions, los deportes KeyboardEvent objeto una propiedad location hoy en día.

De los Mozilla Developer Network:

Los valores posibles son:

DOM_KEY_LOCATION_STANDARD0 La clave tiene sólo una versión, o no se puede distinguir entre la izquierda y la derecha versiones de la llave, y no se presionó en el teclado numérico ni en la clave que se considera parte del teclado.

DOM_KEY_LOCATION_LEFT1 La clave era la versión de la tecla de la izquierda; por ejemplo, se presionó la tecla de control izquierda en un teclado estándar 101 de EE. UU.. Este valor solo se usa para las teclas que tienen más de una ubicación posible en el teclado.

DOM_KEY_LOCATION_RIGHT2 La clave era la versión de la llave de la mano derecha; por ejemplo, la tecla de control de la derecha se presiona en un teclado estándar de EE. UU. de 101 teclas. Este valor solo se usa para claves que tienen más de una ubicación posible en el teclado .

DOM_KEY_LOCATION_NUMPAD3 La clave estaba en el teclado numérico , o tiene un código de tecla virtual que corresponda al teclado numérico .

Nota: Cuando NumLock está bloqueado, Gecko siempre devuelve DOM_KEY_LOCATION_NUMPAD para las teclas del teclado numérico. De lo contrario, cuando se desbloquea NumLock y el teclado tiene un teclado numérico , Gecko siempre devuelve DOM_KEY_LOCATION_NUMPAD también. En la otra mano , si el teclado no tiene un teclado, como en una computadora portátil , algunas teclas se convierten en Numpad solo cuando NumLock está bloqueado. Cuando tales teclas desencadenan eventos clave, el valor del atributo de ubicación depende de la clave. Es decir, no debe ser DOM_KEY_LOCATION_NUMPAD.Nota: Los eventos clave de la tecla NumLock indican DOM_KEY_LOCATION_STANDARD ambos en Gecko e Internet Explorer.

Answer 2

Si hay una tecla en el teclado que es físicamente diferente, las aplicaciones del navegador deben ser tan capaces como las aplicaciones de escritorio para diferenciar.

Con las últimas versiones de Chrome (39.0.2171.95 m), Firefox (32.0.3), IE (11.0.9600.17501) y Opera (12.17), el objeto de evento del teclado ahora tiene la propiedad de ubicación. Supongo que esta propiedad ha existido por un tiempo, aunque está poco documentada.

Las pruebas de onkeydown revelan que cuando se presiona la tecla Intro "normal", el código de tecla = 13 y la ubicación = 0; cuando se presiona el teclado numérico, keyCode = 13 y location = 3.

Así que el código siguiente se puede utilizar para establecer == clave 13 si el escriba, == clave 176 si teclado numérico introduzca:

window.onkeydown=function(ev) 
{ 
    var e= ev || window.event, 
     key = e.keyCode || e.which; 

    if ((key==13) && 
     (e.location===3)) 
     key=176; // 176 is the scancode for the numpad enter 
    // continued.... 
} 

Answer 3

estoy proporcionando una actualización ya que esta cuestión sigue apareciendo en la parte superior de resultados de búsqueda de google

Por MDN, KeyboardEvent.keyCode y KeyBoardEvent.charCode están en desuso y ya no se deben usar.

Las claves KeyboardEvent se pueden determinar accediendo a las propiedades KeyboardEvent.key, KeyboardEvent.code y KeyboardEvent.location según sea necesario.

KeyboardEvent.key devuelve generalmente lo que se ve en un editor de texto para las claves de salida y el nombre en las teclas que no son de salida (incluido el uso de mayúsculas y minúsculas).

KeyboardEvent.code devuelve una descripción de cadena de la clave.

KeyboardEvent.location devuelve un número entero entre 0 y 3 para indicar el área del teclado en el que se encuentra la clave (estándar, izquierda, derecha y teclado numérico, respectivamente).

Understanding the difference entre estas propiedades puede ayudar a determinar cuál será el más apropiado para su situación dada. En el caso de esta pregunta: event.key devolverá la misma salida ("Enter") para las teclas 'retorno de carro' y 'teclado numérico', mientras que event.code devolverá "Enter" y "NumpadEnter" respectivamente.

En este caso, si desea diferenciar entre el teclado numérico y las teclas del teclado, puede usar event.code. Si desea que su operación sea la misma, event.key sería una mejor opción.

Si desea diferenciar entre otras teclas, como las teclas Ctrl izquierda y derecha, también debería mirar la propiedad event.location.

Voy a agregar un pequeño patio de juegos para ver la diferencia entre estas propiedades de eventos. Crédito para MDN para proporcionar the concept que sólo pequeñas modificaciones a continuación:

window.addEventListener("keydown", function(event) { 
 

 
    let str = "key = '" + event.key + 
 
       "' &nbsp code = '" + event.code + "'" + 
 
       "' &nbsp location = '" + event.location + "'" ; 
 
       
 
    let el = document.createElement("span"); 
 
    
 
    el.innerHTML = str + "<br/>"; 
 
    
 
    document.getElementById("output").appendChild(el); 
 
    
 
}, true);

#output { 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    overflow-y: auto; 
 
    margin-left: 4em 
 
} 
 

 
#output span { 
 
    line-height: 2em; 
 
} 
 

 
#output :nth-child(2n) { 
 
    color: blue; 
 
}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code --> 
 

 
<p> 
 
    Press keys on the keyboard to see what the KeyboardEvent's key and code values are for each one. 
 
</p> 
 
<div id="output"></div>