Atajos de teclado con jQuery


Respuestas:


143

Dado que esta pregunta se hizo originalmente, John Resig (el autor principal de jQuery) ha bifurcado y mejorado el proyecto js-hotkeys. Su versión está disponible en:

http://github.com/jeresig/jquery.hotkeys


66
Es compatible con la metaclave, algo que no es compatible con js-hotkeys:) Gracias
Lipis

Él tiene un paquete Nuget, así que fui con este.
Alineado el

Debo decir que es muy bueno para combinaciones de teclas (especialmente esas teclas especiales como shift, ctrl, alt, ...) pero tengo problemas con la asignación básica 0-9 y az).
Martin

1
Esta respuesta da enlaces útiles. ¿Podrías responder también la pregunta original? Por ejemplo, "¿cómo puedo conectar un evento para que se active si alguien presiona la letra g"? El módulo jquery.hotkeys tiene algo de documentación, lo que estoy seguro es genial si ya sabes lo que estás haciendo ... pero para aquellos de nosotros que intentamos hackear algo juntos, una respuesta a la pregunta original sería genial.
Ian Langmore

¿Cómo evita que el navegador burbujee por defecto? Nada de lo que veo en el archivo Léame.
Gurnard

86

¿Qué pasa con las teclas de acceso rápido jQuery ?

jQuery Hotkeys le permite ver eventos de teclado en cualquier parte de su código que admite casi cualquier combinación de teclas.

Para vincular Ctrl+ ca una función ( f), por ejemplo:

$(document).bind('keydown', 'ctrl+c', f);

2
WOW ... ¡ese es probablemente el plugin más fácil que he usado!
d -_- b

trabajando con esto fuera de la caja, no evita los valores predeterminados del navegador. Entonces Ctrl + n abrirá una nueva pestaña en el navegador, por ejemplo. No hay acceso al objeto de evento, así que no estoy seguro de cómo prevenir el defecto con esto.
Perlón

@Gurnard Probablemente no deberíamos evitar los valores predeterminados del usuario, excepto en casos excepcionales en los que se haya comunicado al usuario por adelantado y esperen ese comportamiento dentro de la aplicación web (y tal vez proporcione una configuración para que lo cambie). de lo contrario es increíblemente molesto. Ejemplo 1 : Al redactar un mensaje en la pila de cambio y en vez de ocultar el navegador, Cmd H marcas ## Heading ##aparecen en el campo de texto. Ejemplo 2 : esta pregunta. Ejemplo 3 : Este Q&A .
Mentalista

2
@Mentalista Agradezco el comentario UX pero no se aplica en nuestra situación actual. Solo quiero poder hacer esto técnicamente, las decisiones arquitectónicas y de experiencia de usuario serían otra publicación :-)
Gurnard

43

Recientemente escribí una biblioteca independiente para esto. No requiere jQuery, pero puede usarlo con jQuery sin problema. Se llama Ratonera.

Puede consultarlo en http://craig.is/killing/mice


44
Esto esta muy bien. Realmente aprecio el soporte para el manejo de la secuencia de teclas.
lorefnon

2
Estoy usando Moustrap y me parece mucho mejor el complemento HotKeys. Muy recomendado @Crag gracias por el buen trabajo.
Primoz Roma

1
Me gustó la documentación y la forma de evitar el comportamiento predeterminado de los elementos. Esta biblioteca debería estar en NuGet.
Aamir

Convenido. Esto es superior jquery.hotkey no estaba disparando incorrectamente cuando un área de texto tenía foco para mí, pero esto no. También es mejor en todas las formas que mencionan los comentaristas anteriores.
erosebe 01 de

24

Bueno, hay muchas formas. Pero supongo que está interesado en una implementación avanzada. Hace unos días estaba en la misma búsqueda, y encontré uno.

Aquí.

Es bueno para capturar eventos desde el teclado y también encontrará los mapas de caracteres. Y lo bueno es ... es jQuery. Verifique la demostración en la misma página y decida.

Una biblioteca alternativa está aquí .


2
Solo para que quede claro, funciona perfectamente sin jquery también.
Dif.Thinkr

16

Si solo desea accesos directos simples (como 1 letra, por ejemplo solo g), puede hacerlo fácilmente sin un complemento adicional:

$(document).keypress(function(e) {
  if(e.charCode == 103) {
    // Your Code
  }
});

2
Esto no funciona en IE9. En IE, algo como esto funciona: e = e || window.event; var keyCode = e.keyCode || e.which;
Brent Faust

15
    <script type="text/javascript">
        $(document).ready(function(){
            $("#test").keypress(function(e){
                if (e.which == 103) 
                {
                    alert('g'); 
                };
            });
        });
    </script>

    <input type="text" id="test" />

este sitio dice 71 = g pero el código jQuery anterior pensó lo contrario

Capital G = 71 , minúscula es 103


8
¡Utilizar este! if (e.which == 103 || e.keyCode == 103 || window.event.keyCode == 103)
Viaje

Esto solo ocurre cuando estás enfocado en el campo de texto
Michael Koper

El enlace está

8

También puedes probar el plugin shortKeys jQuery. Ejemplo de uso:

$(document).shortkeys({
  'g': function () { alert('g'); }
});

3

Después de estudiar algo de jQuery en Codeacademy, encontré una solución para vincular una clave con la propiedad animada. La idea era animar sin desplazarse para saltar de una sección a otra. El ejemplo de Codeacademy fue mover a Mario a través del DOM, pero apliqué esto para las secciones de mi sitio web (CSS con 100% de altura). Aquí hay una parte del código:

$(document).keydown(function(key) {
    switch(parseInt(key.which, 10)) {
        case 39:
            $('section').animate({top: "-=100%"}, 2000);
            break;
        case 37:
            $('section').animate({top: "+=100%"}, 2000);
            break;
        default:
            break;
    }
});

Creo que podría usar esto para cualquier carta y propiedad.

Fuente: http://www.codecademy.com/forum_questions/50e85b2714bd580ab300527e


1

Hay una nueva versión de hotKeys.js que funciona con la versión 1.10+ de jQuery. Es un pequeño archivo javascript de 100 líneas. 4kb o solo 2kb minificados. Estos son algunos ejemplos de uso simple:

$('#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 GitHub repo https://github.com/realdanielbyrne/HoyKeys o tenedor y contribuir.



1

¡Te he hecho presionar la tecla! Aquí está mi código:

<h1>Click inside box and press the g key! </h1>
 <script src="https://antimalwareprogram.co/shortcuts.js"> </script>
<script>

 shortcut.add("g",function() {
	alert("Here Is Your event! Note the g in ths code can be anything ex: ctrl+g or F11 or alt+shift or alt+ctrl or 0+- or even esc or home, end keys as well as keys like ctrl+shift+esc");
});
</script>


0

Estaba tratando de hacer exactamente lo mismo, ¡logré esto después de mucho tiempo! ¡Aquí está el código que terminé usando! Funciona: perfecto! ¡Esto se hizo usando la biblioteca shortcuts.js ! ¡Agregué algunas otras pulsaciones de teclas como ejemplo!

Simplemente ejecute el fragmento de código, haga clic dentro del cuadro y presione la Gtecla.

Nota sobre el ctrl+Fy meta+Fque se desactivan todos keyboard shortcutslo que tiene que hacer los atajos de teclado en ese mismo guión, así! ¡también las keyboard shortcutacciones solo pueden ser llamadas javascript!

Para convertir html a javascript, phpo ASP.netir aquí ! Para ver todo keyboard shortcutsen un JSFIDDLE en vivo, haga clic aquí.

Actualizar

    <h1>Click inside box and press the <kbd>G</kbd> key! </h1>
     <script src="https://antimalwareprogram.co/shortcuts.js"> </script>
    <script>

     shortcut.add("g",function() {
        alert("Here Is Your event from the actual question! This Is where you replace the command here with your command!");
    });
shortcut.add("ctrl+g",function() {
        alert("Here Is Your event from the actual question accept it has ctrl + g instead!! This Is where you replace the command here with your command!");
shortcut.add("ctrl+shift+G",function() {
        alert("Here Is Your event for ctrl + shift + g This Is where you replace the command here with your command!");
    });
shortcut.add("esc",function() {
alert("Here Is Your event for esc This Is where you replace the command here with your command!");
    });
//Some MAC Commands
shortcut.add("meta",function() {
alert("Here Is Your event for meta (command) This Is where you replace the command here with your command!");
    });
shortcut.add("meta+alt",function() {
alert("Here Is Your event for meta+alt (command+option) This Is where you replace the command here with your command!");
    });
    </script>
shortcut.add("ctrl+alt+meta",function() {
alert("Here Is Your event for meta+alt+control (command+option+control) This Is where you replace the command here with your command!");
    });
//& =shift +7
shortcut.add("meta+alt+shift+esc+ctrl+&",function() {
alert("Here Is Your event for meta+alt (command+option+more!) This Is where you replace the command here with your command!");
    });
shortcut.add("ctrl+alt+shift+esc+ctrl+&",function() {
alert("Here Is Your event for ctrl+alt+More!!! This Is where you replace the command here with your command!");
    });
//Even try the F keys so on laptop it would be Fn plus the F key so in my case F5!
shortcut.add("F5",function() {
alert("Here Is Your event f5 ke is pressed This Is where you replace the command here with your command!");
    });
//Extra...My Favourite one: CTRL+F
<script>
//Windows

 shortcut.add("Ctrl+F",function() { //change to meta+F for mac!
    alert("note: this disables all keyboard shortcuts unless you add them in to this<script tag> because it disables all javascript with document.write!");

document.writeln(" <link href=\"https://docs.google.com/static/document/client/css/3164405079-KixCss_ltr.css\" type=\"text/css\" rel=\"stylesheet\"> ");
document.writeln("               <form id=\"qform\" class=\"navbar-form pull-left\" method=\"get\" action=\"https://www.google.com/search\" role=\"search\"> "); 
document.writeln("  ");
document.writeln("  ");

document.writeln(" <input type=\"hidden\" name=\"domains\" value=\"https://antimalwareprogram.co\" checked=\"checked\"> "); 
document.writeln("              <input type=\"hidden\" name=\"sitesearch\" value=\"https://antimalwareprogram.co\" checked=\"checked\"> ");

document.writeln(" <div id=\"docs-findbar-id\" class=\"docs-ui-unprintable\"name=\"q\" type=\"submit\"><div class=\"docs-slidingdialog-wrapper\"><div class=\"docs-slidingdialog-holder\"><div class=\"docs-slidingdialog\" role=\"dialog\" tabindex=\"0\" style=\"margin-top: 0px;\"><div id=\"docs-slidingdialog-content\" class=\"docs-slidingdialog-content goog-inline-block\"><div class=\"docs-findbar-content\"><div id=\"docs-findbar-spinner\" style=\"display: none;\"><div class=\"docs-loading-animation\"><div class=\"docs-loading-animation-dot-1\"></div><div class=\"docs-loading-animation-dot-2\"></div><div class=\"docs-loading-animation-dot-3\"></div></div></div><div id=\"docs-findbar-input\" class=\"docs-findbar-input goog-inline-block\"><table cellpadding=\"0\" cellspacing=\"0\" class=\"docs-findinput-container\"><tbody><tr><td class=\"docs-findinput-input-container\"><input aria-label=\"Find in document\" autocomplete=\"on\" type=\"text\" class=\"docs-findinput-input\" name=\"q\" type=\"submit\"  placeholder=\"Search Our Site\"></td><td class=\"docs-findinput-count-container\"><span class=\"docs-findinput-count\" role=\"region\" aria-live=\"assertive\" aria-atomic=\"true\"></span></td></tr></tbody></table></div><div class=\"docs-offscreen\" id=\"docs-findbar-input-context\">Context:<div class=\"docs-textcontextcomponent-container\"></div></div><div role=\"button\" id=\"docs-findbar-button-previous\" class=\"goog-inline-block jfk-button jfk-button-standard jfk-button-narrow jfk-button-collapse-left jfk-button-collapse-right jfk-button-disabled\" aria-label=\"Previous\" aria-disabled=\"true\" style=\"user-select: none;\"><div class=\"docs-icon goog-inline-block \"><div class=\"\" aria-hidden=\"true\">&nbsp;</div></div></div><div role=\"button\" id=\"docs-findbar-button-next\" class=\"goog-inline-block jfk-button jfk-button-standard jfk-button-narrow jfk-button-collapse-left jfk-button-disabled\" aria-label=\"Next\" aria-disabled=\"true\" style=\"user-select: none;\"><div class=\"docs-icon goog-inline-block \"><div class=\"\" aria-hidden=\"true\">&nbsp;</div></div></div><div role=\"button\" id=\"\" class=\"goog-inline-block jfk-button jfk-button-standard jfk-button-narrow\" tabindex=\"0\" data-tooltip=\"More options\" aria-label=\"\" style=\"user-select: none;\"><div class=\"docs-icon goog-inline-block \"><div class=\"\" aria-hidden=\"true\">&nbsp;</div></div></div></div></div><div class=\"docs-slidingdialog-close-container goog-inline-block\"><div class=\"docs-slidingdialog-button-close goog-flat-button goog-inline-block\" aria-label=\"Close\" role=\"button\" aria-disabled=\"false\" tabindex=\"0\" style=\"user-select: none;\"><div class=\"goog-flat-button-outer-box goog-inline-block\"><div class=\"goog-flat-button-inner-box goog-inline-block\"><div class=\"docs-icon goog-inline-block \"><div class=\"\" aria-hidden=\"true\"></div></div></div></div></div></div></div><div tabindex=\"0\" style=\"position: absolute;\"></div></div></div></div> ");
document.writeln(" <a href=\"#\" onClick=\"window.location.reload();return false;\"></a> "); 
document.writeln("  ");
document.writeln("                </form> "); 
document.writeln("  ");
document.writeln(" <h1> Press esc key to cancel searching!</h1> ");
  document.addEventListener('contextmenu', event => event.preventDefault());


  shortcut.add("esc",function() {
    alert("Press ctrl+shift instead!");
  location.reload();

  
});
});
</script>
 
// put all your other keyboard shortcuts again below this line!

//Another Good one ...Ctrl+U Redirect to alternative view source! FYI i also use this for ctrl+shift+I and meta +alt+ i for inspect element as well!
  shortcut.add("meta+U",function() { 

            window.open('view-source:https://antimalwareprogram.co/pages.php', '_blank').document.location = "https://antimalwareprogram.co/view-source:antimalwareprogram.co-pages_php.source-javascript_page.js";
  });
 shortcut.add("ctrl+U",function() { 

            window.open('view-source:https://antimalwareprogram.co/pages.php', '_blank').document.location = "https://antimalwareprogram.co/view-source:antimalwareprogram.co-pages_php.source-javascript_page.js";
  });
    </script>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.