javascript - ejemplo - keycode numbers
event.keycode no devuelve valores correctos en Firefox (5)
Estoy intentando el siguiente código para activar un método js cuando se presiona la space-bar
dentro de un cuadro de entrada.
<input id="j1" />
$(''#j1'').keypress (function (event){
alert(event.keycode)
});
En Firefox, esto devuelve el valor correcto solo cuando se presiona enter
, los valores devueltos para otras teclas solo son 0 cada vez. En IE / Chrome esto funciona perfectamente.
KeyboardEvent.keyCode:
El valor del evento keypress es diferente entre los navegadores. IE y Google Chrome establecen el valor de KeyboardEvent.charCode. Gecko establece 0 si la tecla presionada es una tecla imprimible; de lo contrario, establece el mismo Código de tecla como un evento de reducción de teclas o de activación de teclas
Entonces, desde el punto de vista de Firefox, en realidad ha devuelto valores correctos. Ver los documentos .
keyCode
, which
, keyIdentifier
y charCode
están en desuso
Esta característica se ha eliminado de los estándares web. Aunque algunos navegadores aún lo admiten, está en proceso de ser descartado. Evita usarlo y actualiza el código existente si es posible;
keyIdentifier
no tenía soporte en IE y Firefox y fue eliminado de Opera y Chrome
Con charCode
como no estándar
Esta característica no es estándar y no está en una pista estándar. No lo use en sitios de producción orientados a la Web: no funcionará para todos los usuarios. También puede haber grandes incompatibilidades entre las implementaciones.
Entonces cuales son las alternativas?
I. Utilice la propiedad de la key
lugar
readonly attribute DOMString key
Mantiene un valor de atributo clave correspondiente a la tecla presionada
Ejemplos: "a", "A", "@", "%", "$", "ا", "ب", "ة", "ت", ..., "١", "٢", "٣", "Tabulador", "Enter", todos "F1" ... `
Se ha ganado el soporte de todos los navegadores principales (Firefox 52, Chrome 55, Safari 10.1, Opera 46), excepto Internet Explorer 11, que tiene identificadores de claves no estándar y comportamiento incorrecto con AltGraph. Más información
Si eso es importante y / o la compatibilidad con versiones anteriores es, puede usar la detección de características como se muestra en el siguiente código:
Observe que el valor de la key
es diferente de keyCode
o de which
propiedades que contiene: contiene el nombre de la clave, no su código. Si su programa necesita códigos de caracteres, puede utilizar charCodeAt()
. Para caracteres imprimibles individuales, puede usar charCodeAt()
, si está tratando con teclas cuyos valores contienen varios caracteres, como ArrowUp, es probable que esté probando teclas especiales y realice las acciones correspondientes. Así que intente implementar una tabla de valores de claves y sus códigos correspondientes charCodeArr["ArrowUp"]=38
, charCodeArr["Enter"]=13
, charCodeArr[Escape]=27
... y así sucesivamente, eche un vistazo a Key Valores y sus códigos correspondientes.
if(e.key!=undefined){
var characterCode = charCodeArr[e.key] || e.key.charCodeAt(0);
}else{
/* As @Leonid suggeted */
var characterCode = e.which || e.charCode || e.keyCode || 0;
}
/* ... code making use of characterCode variable */
II.También puedes usar la propiedad del code
:
readonly attribute DOMString code
Mantiene una cadena que identifica la tecla física que se presiona. El valor actual no se ve afectado por el diseño actual del teclado o el estado del modificador, por lo que una tecla en particular siempre devolverá el mismo valor.
Tiene un efecto similar a la propiedad de la key
y una salida como "keyW"
para el botón W presionado de un teclado estadounidense con diseño QUERTY. Si se presionara el mismo botón en otro diseño (AZERTY) u otro idioma (hebreo) o se combinara con un modificador (cambio), la propiedad de la key
cambiaría en consecuencia, mientras que la propiedad del code
todavía tendría el mismo valor "keyW"
más here .
La propiedad del code
es compatible con Chrome 49, Firefox 52, Safari 10.1 y Opera 46, pero no con Internet Explorer.
ver también :
El problema no es que todos los navegadores tengan las mismas implementaciones en las pulsaciones de teclas. La solución sería revisar todos los lugares posibles donde se registró la key
. En este caso: event.keycode
y event.which
Ver esta publicación para más información.
jQuery Event Keypress: ¿Qué tecla fue presionada?
EDITAR
Finalmente desenterré mis funciones antiguas, este es el código real que uso:
evt = (evt) ? evt : event;
var charCode = evt.which || evt.charCode || evt.keyCode || 0;
En los navegadores que no son IE, desea which
propiedad charCode
o charCode
en un evento de keypress
lugar de la propiedad keyCode
. El evento de keypress
es para detectar caracteres escritos, mientras que la keyup
y la keydown
son para detectar claves físicas (en esos eventos, keyCode
funciona en todos los navegadores principales).
var charCode = (typeof event.which == "number") ? event.which : event.keyCode;
Sin embargo, jQuery normaliza la propiedad de los eventos de pulsación de tecla utilizando un código similar a este, por lo que en jQuery solo necesita
var charCode = event.which;
Para (mucho) más detalles sobre eventos clave, visite http://unixpapa.com/js/key.html .
SI "event.keyCode" no devuelve los valores correctos, entonces para firefox puede usar " event.charCode"
var keyValue = event.charCode || event.keyCode;
Si obtiene un 0
sin importar qué tecla presione, intente usar charCode
lugar de keyCode
Esto sucede porque usted está llamando al objeto KeyboardEvent que usa which
y el charCode
en lugar del objeto de evento que usa el keyCode
de keyCode
para devolver los valores de Unicode del teclado. Para obtener más información, consulte los documentos web de MDN para obtener más información sobre KeyboardEvent: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent