Cómo implementar teclas de acceso rápido similares a gmail

Question

Me gustaría implementar teclas rápidas de teclado en una aplicación web. Hasta ahora he estado usando el jquery.hotkeys plugin, y me ha permitido implementar teclas de acceso rápido simples (por ejemplo, teclas simples como a).

ahora para apoyar alguna de navegación más complejas a través del teclado, me gustaría poner en práctica teclas de acceso rápido '' llave en múltiples al igual que en Gmail, donde por ejemplo, pulsando g (por 'ir') seguido de i (para 'bandeja de entrada') te lleva a la bandeja de entrada.

¿Alguien sabe de un componente de javascript (jquery plugin o similar) para esa tarea? ¿O cuál sería un buen enfoque para implementar tales teclas rápidas?

Answer 1

Hay una mejor solución para esto usando keymaster con el complemento keymaster-sequence.

Las fuentes están aquí keymaster.js y aquí keymaster.sequence.js

usarlos como esto:

<script type="text/javascript" src="https://raw.github.com/madrobby/keymaster/master/keymaster.min.js"></script> 
<script type="text/javascript" src="https://raw.github.com/chevalric/keymaster-sequence/master/keymaster.sequence.min.js"></script> 
<script> 
key.sequence(["g","i"], function() { 
    var el = document.getElementById("result"); 
    el.innerHTML = "You first pressed 'g', then you pressed 'i'"; 
}); 

</script> 
<div id="result"></div> 

Aquí hay una pequeña demostración http://jsfiddle.net/Nwdyd/1/ que también muestra el manejo de colisión (unión g, así como g i)

Answer 2

Establezca un valor booleano global cuando se presiona g. Luego verifique si está configurado cuando se presiona i. Opcionalmente puede implementar un tiempo de espera en la prensa g para que tenga tiempo limitado para presionar i después.

var goPressed = false; 
function hotkeyPressed (event) { 
    if (event.keyCode == KEYCODE_FOR_G) { 
     goPressed == true; 
     //Optionally: 
     setTimeout(clearPresses, 3000); 
    } 
    if (event.keyCode == KEYCODE_FOR_I && goPressed) { 
     gotoInbox(); 
    } 
} 

function clearPresses() { 
    goPressed = false; 
} 

Answer 3

Se podría seguir utilizando el plugin mediante la adición de un estado y un tiempo de espera, tanto como Matt Fellows sugiere.

var gWasPressed = false;  

var clearKeyState = function() { 
    gWasPressed = false; 
} 

var changeKeyState = function() { 
    gWasPressed = true; 
    setTimeout(clearKeyState, 3000); 
} 

$(document).bind('keydown', 'g', changeKeyState); 
$(document).bind('keydown', 'i', commandI); 

var commandI = function() { 
    if (gWasPressed) { 
    // go to inbox 
    clearKeyState(); 
    } else { 
    // do whatever i was supposed to do if g wasn't pressed 
    } 
} 

solución alternativa sería volver a enlazar las teclas cuando se presiona g, y desenlazar ellos cuando el tiempo de espera expira o cuando se pulsa la tecla secundaria i.

Answer 4

Hay una nueva versión de hotKeys.js que funciona con la versión 1.10+ de jQuery. Es pequeño, archivo de javascript de 100 líneas. 4kb o solo 2kb minificado. Aquí están algunos ejemplos de uso son simples:

$('#myBody').hotKey({ key: 'c', modifier: 'alt' }, doSomething); 

$('#myBody').hotKey({ key: 'f4' }, doSomethingElse); 

$('#myBody').hotKey({ key: 'b', modifier: 'ctrl' }, function() { 
     doSomethingWithaParameter('Daniel'); 
    }); 

$('#myBody').hotKey({ key: 'd', modifier :'shift' }, doSomethingCool); 

Clonar el repositorio de GitHub: https://github.com/realdanielbyrne/HoyKeys.git o ir a la página de recompra github https://github.com/realdanielbyrne/HoyKeys o tenedor y contribuir.