Raccourcis clavier avec jQuery

186

Comment puis-je câbler un événement pour déclencher si quelqu'un appuie sur la lettre g?

(Où est la carte de caractères pour toutes les lettres BTW?)

T Zengerink
la source
3
Carte de caractères pour toutes les lettres sur ce site chic: rmhh.co.uk/ascii.html
Trevor
Un autre site utile pour les codes clés est keycode.info
npad

Réponses:

143

Depuis que cette question a été posée à l'origine, John Resig (l'auteur principal de jQuery) a bifurqué et amélioré le projet js-hotkeys. Sa version est disponible sur:

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

npad
la source
6
Il prend en charge la metaclé, quelque chose qui n'est pas pris en charge dans le js-hotkeys:) Merci
Lipis
Il a un paquet Nuget, donc je suis allé avec celui-ci.
Aligné
Je dois dire que c'est très bon pour les combinaisons de touches (en particulier les touches spéciales comme shift, ctrl, alt, ...) mais j'ai des problèmes avec le mappage de base 0-9 et az).
Martin
1
Cette réponse donne des liens utiles. Pourriez-vous également répondre à la question initiale? Par exemple, "comment puis-je câbler un événement pour déclencher si quelqu'un appuie sur la lettre g"? Le module jquery.hotkeys contient de la documentation, ce qui, j'en suis sûr, est génial si vous savez déjà ce que vous faites ... mais pour ceux d'entre nous qui essaient de pirater quelque chose ensemble, une réponse à la question originale serait géniale.
Ian Langmore
Comment éviter que la valeur par défaut ne se propage dans le navigateur? Rien de mentionné sur le readme d'après ce que je vois.
Gurnard
86

Qu'en est-il des raccourcis clavier jQuery ?

jQuery Hotkeys vous permet de surveiller les événements de clavier n'importe où dans votre code, prenant en charge presque toutes les combinaisons de touches.

Pour lier Ctrl+ cà une fonction ( f), par exemple:

$(document).bind('keydown', 'ctrl+c', f);
Ionuț Staicu
la source
2
WOW ... c'est probablement le plugin le plus simple que j'ai jamais utilisé!
d -_- b
travailler avec cela hors de la boîte n'empêche pas les paramètres par défaut du navigateur. Ainsi, Ctrl + n ouvrira un nouvel onglet dans le navigateur par exemple. Il n'y a pas d'accès à l'objet événement, donc vous ne savez pas comment empêcher Par défaut avec cela.
Gurnard
@Gurnard Nous ne devrions probablement pas empêcher les valeurs par défaut des utilisateurs, sauf dans de rares cas où cela a été communiqué à l'utilisateur à l'avance et qu'ils s'attendent à ce comportement dans l'application Web (et peuvent peut-être leur fournir un paramètre pour le modifier). Sinon, c'est incroyablement ennuyeux. Exemple 1 : Lors de la rédaction d'un article sur Stack Exchange et au lieu de cacher le navigateur, Cmd H fait ## Heading ##apparaître dans le champ de texte. Exemple 2 : Cette question. Exemple 3 : Ce Q&R .
Mentalist
2
@Mentalist J'apprécie le commentaire UX mais cela ne s'applique pas à notre situation actuelle. Je veux juste pouvoir le faire techniquement, les décisions architecturales et UX seraient un autre post :-)
Gurnard
43

J'ai récemment écrit une bibliothèque autonome pour cela. Il ne nécessite pas jQuery, mais vous pouvez l'utiliser avec jQuery sans problème. Il s'appelle Mousetrap.

Vous pouvez le vérifier sur http://craig.is/killing/mice

Craig
la source
4
C'est très gentil. J'apprécie vraiment le support pour la gestion des séquences de touches.
lorefnon
2
J'utilise Moustrap et le trouve bien meilleur avec le plugin HotKeys. Très recommandé. @Crag merci pour le bon travail.
Primoz Rome
1
J'ai aimé la documentation ainsi que la manière d'éviter le comportement par défaut des éléments. Cette bibliothèque doit être sur NuGet.
Aamir
D'accord. C'est supérieur. jquery.hotkey ne se déclenchait pas correctement quand une zone de texte avait le focus pour moi, mais ce n'était pas le cas. De plus, c'est mieux de toutes les manières mentionnées par les commentateurs précédents.
erosebe
24

Eh bien, il existe de nombreuses façons. Mais je suppose que vous êtes intéressé par une implémentation avancée. Il y a quelques jours, j'étais dans la même recherche et j'en ai trouvé une.

Ici.

C'est bon pour capturer des événements à partir du clavier et vous trouverez également les cartes de caractères. Et la bonne chose est ... c'est jQuery. Consultez la démo sur la même page et décidez.

Une bibliothèque alternative est ici .

simplement
la source
2
Juste pour être clair, cela fonctionne parfaitement sans jquery aussi.
Diff.Thinkr
16

Si vous voulez juste des raccourcis simples (comme 1 lettre, par exemple juste g), vous pouvez facilement le faire sans plugin supplémentaire:

$(document).keypress(function(e) {
  if(e.charCode == 103) {
    // Your Code
  }
});
Michael Koper
la source
2
Cela ne fonctionne pas dans IE9. Dans IE, quelque chose comme ça fonctionne: e = e || window.event; var keyCode = e.keyCode || e. qui;
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" />

ce site dit 71 = g mais le code jQuery ci-dessus pensait autrement

Majuscule G = 71 , minuscule est 103

chasseur
la source
8
Utilisez ceci! if (e.which == 103 || e.keyCode == 103 || window.event.keyCode == 103)
Voyage
Cela ne se produit que lorsque vous vous concentrez sur le champ de texte
Michael Koper
Le lien est mort :(
8

Vous pouvez également essayer le plugin jQuery shortKeys . Exemple d'utilisation:

$(document).shortkeys({
  'g': function () { alert('g'); }
});
Brant Bobby
la source
3

Après avoir étudié quelques jQuery à Codeacademy, j'ai trouvé une solution pour lier une clé avec la propriété animate. Toute l'idée était d'animer sans faire défiler pour passer d'une section à l'autre. L'exemple de Codeacademy était de déplacer Mario à travers le DOM mais je l'ai appliqué pour les sections de mon site Web (CSS avec une hauteur de 100%). Voici une partie du code:

$(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;
    }
});

Je pense que vous pouvez l'utiliser pour n'importe quelle lettre et propriété.

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

Maikeximu
la source
1

Il existe une nouvelle version de hotKeys.js qui fonctionne avec la version 1.10+ de jQuery. Il s'agit d'un petit fichier javascript de 100 lignes. 4 Ko ou juste 2 Ko minifiés. Voici quelques exemples d'utilisation 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);

Clonez le dépôt depuis github: https://github.com/realdanielbyrne/HoyKeys.git ou accédez à la page du dépôt github https://github.com/realdanielbyrne/HoyKeys ou forkez et contribuez.

realdanielbyrne
la source
1

Semblable à @craig, j'ai récemment créé une bibliothèque de raccourcis.

https://github.com/blainekasten/shortcut.js

API chaînable avec prise en charge de plusieurs fonctions liées à un raccourci.

Blaine Kasten
la source
1

Je t'ai fait la touche pressée! Voici mon code:

<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>

Oméga universel
la source
0

J'essayais de faire exactement la même chose, je l'ai accompli après un long moment! Voici le code que j'ai fini par utiliser! Cela fonctionne: parfait! Cela a été fait en utilisant la bibliothèque shortcuts.js ! a ajouté quelques autres touches à titre d'exemple!

Exécutez simplement le code snip-it, cliquez à l'intérieur de la boîte et appuyez sur la Gtouche!

Notez sur le ctrl+Fet meta+Fcela désactivera tout keyboard shortcuts, vous devez donc également créer les raccourcis clavier dans ce même script! aussi les keyboard shortcutactions ne peuvent être appelées javascript!

Pour convertir html à javascript, phpou ASP.netaller ici ! Pour voir tout mon keyboard shortcutsdans un JSFIDDLE en direct, cliquez ici!

Mettre à jour

    <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>
Communauté
la source