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

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

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

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

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 .

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

    <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

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

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

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

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.

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.

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>

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>