2011-04-29 7 views
25

Quiero desarrollar una aplicación web, que debería (idealmente) ser completamente utilizable a través del teclado. Sé cómo manejar eventos de teclado en JavaScript, pero administrarlos para una aplicación más grande es bastante aburrido. Me pregunto si alguien conoce una biblioteca que hace que el proceso sea más fácil. ¿Alguna pista? Por favor, no es que no esté interesado en un marco completo de Web GUI. Quiero mantener el control sobre mi página web/aplicación.Accesos directos de teclado de Javascript para la aplicación web

+0

Has visto esto: http://www.openjs.com/scripts/events/keyboard_shortcuts/ – oblig

+0

bounty no tiene nada que ver con aceptar; ver http://stackoverflow.com/faq#bounty –

+0

Aquí hay un artículo sobre cómo elegir atajos de teclado para aplicaciones web: https://medium.com/design-ux/a7c3b7b408ee – KIR

Respuesta

32

Salida mi proyecto:

https://github.com/oscargodson/jkey

y demostraciones:

http://oscargodson.github.com/jKey/

siento libre de usarlo y si lo desea, contribuyen :)

+0

Pensé que había aceptado tu respuesta, así que me pregunto por qué obtuviste solo el 50% de la recompensa? – Achim

+0

Es porque aceptaste después de que se acabó el tiempo, está bien, mal tomar 25;) También puedes marcar esto como un error si sabes con certeza que aceptaste antes de que terminara el tiempo de votación. –

+0

@oscar aceptar no tiene nada que ver con las recompensas. http://stackoverflow.com/faq#bounty –

4

Se podría empezar por leer sobre el accesskey attribute:

Este atributo asigna una clave de acceso a un elemento. Una clave de acceso es un solo carácter del conjunto de caracteres del documento. Nota. Los autores deben considerar el método de entrada del lector esperado al especificar una clave de acceso.
[...]
La invocación de claves de acceso depende del sistema subyacente. Por ejemplo, en las máquinas que ejecutan MS Windows, generalmente se debe presionar la tecla "alt" además de la tecla de acceso. En los sistemas Apple, uno generalmente tiene que presionar la tecla "cmd" además de la tecla de acceso.

También se puede poner el atributo accesskey en <a> elementos, un ejemplo de este uso se puede encontrar en el enlace de la barra lateral "Artículo aleatorio" en Wikipedia.

+1

Las teclas de acceso son para accesibilidad, por ejemplo: 'Home'. – bfontaine

+0

@boudou: Es cierto, pero no hay ninguna razón para limitar el acceso al mouseless. El elemento '

10

Usted puede utilizar Hotkeys - complemento para JQuery. JQuery es una biblioteca javascript bastante ligera. Se necesita un archivo js para utilizar las teclas rápidas.

+4

+1 por mencionar las teclas rápidas de jQuery. Sin embargo, sus siguientes oraciones no tienen mucho sentido como está escrito. – jessegavin

+0

Link; s dead - prueba http://code.google.com/p/js-hotkeys/ – Onimusha

+0

Vivo de nuevo ;;) –

2

This one es muy fácil de usar.

Ex:

shortcut.add("Up",  // key 
      go_up()); // function 
15

que acaba de desarrollar una propia llamada trampa para ratones. Verifique http://craig.is/killing/mice

+2

Mousetrap fue una de esas cosas en las que todo funcionó como esperaba. Buen trabajo. – prototype

+0

Estoy de acuerdo, totalmente patea el culo! Lo dejé caer y estaba fuera. Atajos de teclado implementados dentro de media hora de descargarlo. ¡Y soy un js n00b! – JoeyC

+0

código konami - impresionante – jleach

2

Puede usar el atributo accesskey html, ya que entonces haría que su aplicación web sea accesible.

Utilice el complemento jQuery KeyTips para mostrarlos al usuario de forma similar al Office Ribbon keyboard shortcuts.

enter image description here

Try the Demo. Code on Github.

Tenga en cuenta que Wikipedia page on accesskey enumera las teclas modificadoras para invocar claves de acceso para diferentes navegadores.

Véase también la Lista A Aparte artículo: Accesskeys: Unlocking Hidden Navigation

3

os animo encarecidamente a la salida keymaster Thomas Fuchs para hacer atajos de teclado en aplicaciones web: https://github.com/madrobby/keymaster

Esto hace que sea muy sencillo:

// define short of 'a' 
key('a', function(){ alert('you pressed a!') }); 

// returning false stops the event and prevents default browser events 
key('ctrl+r', function(){ alert('stopped reload!'); return false }); 

// multiple shortcuts that do the same thing 
key('⌘+r, ctrl+r', function(){ }); 
+0

Esto es brillante. ¿Hay alguna forma de evitar el bypass de la clave? Lo he implementado de modo que al presionar 'n' se abre un cuadro de diálogo con un nuevo elemento. Sin embargo, la función 'newItem-también pone el foco sobre el nombre del elemento, y el carácter' n 'se omite en. –

Cuestiones relacionadas