Im usando el código foloowing el seguimiento de los eventos clave¿cómo puedo rastrear las teclas de flecha en Chrome e IE?
oEvent=window.event || oEvent;
iKeyCode=oEvent.keyCode || oEvent.which;alert(iKeyCode);
me facilita alertas en Firefox pero no en IE y cromo. Me da todos los otros caracteres keyborad pero no la tecla esc y las teclas de flecha.
¿Cómo puedo detectar la tecla esc y las teclas de flecha en cromo y IE usando javascript ??
Uso jQuery y usar algo como esto:
$(document).keydown(function(e){
if (e.keyCode == 37) {
alert("left pressed");
return false;
}
});
Los códigos de caracteres:
37: izquierda
38: hasta
39: derecho
40: bajar
Pruebe usar la biblioteca jquery para hacer lo que necesita y luego llame a continuación. En la demostración, puede hacer clic en el cuadro de entrada y luego comenzar a escribir. Te alertará con el código de la llave. Puede vincular ese detector de eventos a cualquier elemento de su página. No tiene que ser solo una entrada.
$(document).ready(function() {
KEY_CODES = {
37: 'left',
38: 'up',
39: 'right',
40: 'down'
}
KEY_STATUS = { keyDown:false };
for (code in KEY_CODES) {
KEY_STATUS[KEY_CODES[code]] = false;
}
$(window).keydown(function (e) {
KEY_STATUS.keyDown = true;
// perform functionality for keydown
if (KEY_CODES[e.keyCode]) {
e.preventDefault();
alert('arrow');
if(e.keyCode == 40)
{
// Arrow Down
}
else if(e.keyCode == 39)
{
// Arrow Right
}
else if(e.keyCode == 38)
{
// Arrow Up
}
else if(e.keyCode == 37)
{
// Arrow Left
}
}
}).keyup(function (e) {
KEY_STATUS.keyDown = false;
if (KEY_CODES[e.keyCode]) {
e.preventDefault();
KEY_STATUS[KEY_CODES[e.keyCode]] = false;
}
});
});
Realmente no necesita JQuery, aunque hace que su código sea más corto.
Tendrá que utilizar el evento keyDown, keyPress no funcionará en las versiones anteriores de IE para las teclas de flecha.
Hay un tutorial completo aquí que puede utilizar, consulte el ejemplo con las teclas de flecha cerca de la parte inferior de la página: http://www.cryer.co.uk/resources/javascript/script20_respond_to_keypress.htm
Aquí hay un código que usé, un poco simplifica ya que siempre tenía que llevar repetida pulsaciones de teclas con almacenamiento en búfer:
document.onkeydown = function(event) {
if (!event)
event = window.event;
var code = event.keyCode;
if (event.charCode && code == 0)
code = event.charCode;
switch(code) {
case 37:
// Key left.
break;
case 38:
// Key up.
break;
case 39:
// Key right.
break;
case 40:
// Key down.
break;
}
event.preventDefault();
};
no funciona con Chrome aquí para la tecla de flecha – herophuong
Funciona para mí en Chrome http://jsfiddle.net/Ueqms/ – Gaurav
Necesitaba usar onkeydown en minúscula para que esto funcione en Opera. es decir 'document.onkeydown = function (event) {...}' –
Acabo de enfrentar el mismo problema. Hay al menos una diferencia. Chrome maneja los eventos keypress y keydown/keyup. keypress evento en Chrome no se activa para las teclas de flecha, mientras que para keydown y keyup lo es.
problema: webkit envía un código clave 38 (flecha arriba) para presionar las teclas al hacer shift-7 (ampersand).
Resumen: & y hasta ambos iguales 38.% y dejó ambas iguales 37. 'y derecha iguales 39. (y abajo ambos iguales a 40. Firefox y Opera, el 37/38/39/40 aren 'enviado para &,%,', (. ellos solo los envían para arriba, abajo, izquierda, derecha. pero webkit y es decir, envían 37/38/39/40 para ambas teclas de flecha y &,%, ', (. tenga en cuenta que para arriba/abajo/izquierda/derecha, webkit establece charCode en 0, pero no en &,%, ', (.
solución: por lo que si el manejo de esos eventos por código clave, es necesario ignorar cuando la tecla de mayúsculas está inactivo o comprobar si el charCode es 0
Aquí es una formulación concisa:
document.onkeydown = function(e) {
switch (e.keyCode) {
case 37:
alert('left');
break;
case 38:
alert('up');
break;
case 39:
alert('right');
break;
case 40:
alert('down');
break;
}
};
Sin embargo, si está utilizando jQuery, que es mejor usar e.which, que jQuery " normaliza" para dar cuenta de las diferencias entre navegadores:
$(document).keydown(function(e) {
switch(e.which) {
// the rest is the same
Esto funcionó para mí en Opera20 e IE8. (No tengo Chrome para probar).
var keyPressListenerFn = function(event) {
if (!event){ event = window.event }
var code = event.charCode && event.keyCode == 0 ? event.charCode : event.keyCode
switch(code) {
case 37: prev(); break // left
case 39: next(); break // right
}
if (event.preventDefault){ event.preventDefault() } // opera20
if (event.returnValue){ event.returnValue = false } // ie8
}
var addEvent = document.attachEvent ? document.attachEvent : document.addEventListener
addEvent('keydown', keyPressListenerFn) // opera20
addEvent('onkeydown', keyPressListenerFn) // ie8
Esto se debe a que existen diferencias en la forma de adjuntar un evento a un nodo DOM entre los navegadores. No estoy seguro de cuál es el código exacto para los diferentes navegadores. – bigblind