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

return function javascript

Question

Algunas aplicaciones de escritorio tratan la tecla ''retorno de carro'' y la tecla ''ingresar'' 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).

¿Se convierten para ser iguales en el entorno del navegador, o es posible diferenciarlos (es decir, hacer que el CR haga una nueva línea en un área de texto y que la tecla ''enter'' envíe su formulario?

Answer 1

Estoy proporcionando una actualización ya que esta pregunta sigue apareciendo cerca de la parte superior de los resultados de búsqueda de Google.

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

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

KeyboardEvent.key generalmente devuelve lo que ve en un editor de texto para las claves de salida y el nombre en las claves que no son de salida (incluyendo las 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 la que se encuentra la tecla (estándar, izquierda, derecha y teclado numérico respectivamente).

Comprender la diferencia entre estas propiedades puede ayudar a determinar cuál será la más adecuada para su situación dada. En el caso de esta pregunta: event.key devolverá la misma salida ( "Enter" ) tanto para el ''retorno de carro'' como para las teclas ''enter del 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 quisiera que su operación fuera igual, event.key sería una mejor opción.

Si quisiera diferenciar entre otras teclas, como las teclas Ctrl izquierda y derecha, también querría ver la propiedad event.location .

Estoy agregando un pequeño patio de juegos para eventos para ver la diferencia entre estas propiedades de eventos. Gracias a KeyboardEvent.code por proporcionar el concepto que solo modifiqué ligeramente 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>

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 diferenciarse.

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 de teclado ahora tiene la propiedad de ubicación. Supongo que esta propiedad ha existido por un tiempo, aunque está ligeramente documentada.

Las pruebas de onkeydown revelan que cuando se presiona la tecla de ingreso "normal", keyCode = 13 y location = 0; cuando se presiona la tecla numérica enter, keyCode = 13 y location = 3.

Por lo tanto, el siguiente código se puede usar para establecer la clave == 13 si ingresa, clave == 176 si se debe ingresar el teclado numérico:

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

Ver el tratado de Jan Wolters sobre Javascript Madness: Keyboard Events .

Enter y Numpad Enter ambos dan el mismo código clave, es decir, 13, porque los navegadores no distinguen entre las dos claves. Para ser honesto, tampoco la mayoría de los ambientes. Es posible diferenciarlas usando la API de Windows (por ejemplo), pero requiere un esfuerzo adicional para hacerlo. Esto, sin embargo, cae fuera del alcance de la abstracción del navegador.

ACTUALIZAR

Como Bill Thorne mentions razón, el objeto KeyboardEvent tiene una propiedad de location hoy en día.

Desde la Red de Desarrolladores de Mozilla :

Los valores posibles son:

DOM_KEY_LOCATION_STANDARD 0 La tecla tiene solo una versión, o no se puede distinguir entre las versiones izquierda y derecha de la tecla, y no se presionó en el teclado numérico o en una tecla que se considera parte del teclado.

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

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

DOM_KEY_LOCATION_NUMPAD 3 La tecla estaba en el teclado numérico o tiene un código de tecla virtual que corresponde al teclado numérico.

Nota: cuando Bloq Num está bloqueado, Gecko siempre devuelve DOM_KEY_LOCATION_NUMPAD para las teclas en el teclado numérico. De lo contrario, cuando NumLock está desbloqueado y el teclado tiene un teclado numérico, Gecko siempre devuelve DOM_KEY_LOCATION_NUMPAD también. Por otro lado, si el teclado no tiene un teclado, como en una computadora portátil, algunas teclas se convierten en Numpad solo cuando Bloq Num está bloqueado. Cuando tales claves disparan 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 NumLock key indican DOM_KEY_LOCATION_STANDARD tanto en Gecko como en Internet Explorer.