Raccourcis clavier avec jQuery
Comment puis-je câbler un événement pour déclencher si quelqu'un appuie sur la lettre g?
(Où est la carte des caractères pour toutes les lettres BTW?)
Depuis que cette question a été posée à l'origine, John Resig (le principal auteur de jQuery) a créé et amélioré le projet js-hotkeys. Sa version est disponible sur:
Qu'en est-il de jQuery Hotkeys ?
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.
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. Ça s'appelle Mousetrap.
Vous pouvez le vérifier à http://craig.is/killing/mice
Eh bien, il y a beaucoup de façons. Mais je suppose que vous êtes intéressé par une implémentation avancée. Il y a quelques jours, j'étais à la même recherche et j'en ai trouvé un.
C'est bien pour capturer des événements à partir du clavier et vous trouverez également les cartes des personnages. Et la bonne chose est ... c'est jQuery. Vérifiez la démo sur la même page et décidez.
Une bibliothèque alternative est ici .
<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
Capital G = 71 , minuscule vaut 103
Si vous voulez juste des raccourcis simples (comme 1 lettre, par exemple juste g) vous pouvez facilement le faire sans un plugin supplémentaire:
$(document).keypress(function(e) {
if(e.charCode == 103) {
// Your Code
}
});
Vous pouvez également essayer le plugin shortKeys jQuery. Exemple d'utilisation:
$(document).shortkeys({
'g': function () { alert('g'); }
});
Après avoir étudié jQuery à Codeacademy, j'ai trouvé une solution pour lier une clé à la propriété animate. L’idée était d’animer sans défilement pour passer d’une section à l’autre. L'exemple de Codeacademy consistait à déplacer Mario dans le DOM, mais je l'ai appliqué à mes sections de 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 pourriez 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. C'est un petit fichier javascript de 100 lignes. 4ko ou juste 2ko 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 à partir de github: https://github.com/realdanielbyrne/HoyKeys.git ou allez à la page du dépôt github https://github.com/realdanielbyrne/HoyKeys = ou fourchette et contribuer.
Je vous ai fait la touche presse! 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>Semblable à @ craig, j'ai récemment construit une bibliothèque de raccourcis.
https://github.com/blainekasten/shortcut.js
API chaînable avec prise en charge de plusieurs fonctions liées à un seul raccourci.
J'essayais de faire exactement la même chose, j'ai accompli cela 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 ! ajouté quelques autres touches appuyées à titre d'exemple!
Il suffit d’exécuter le code snip-it, cliquez dans la zone et appuyez sur le bouton G clé!
Note sur le ctrl+F et meta+F cela désactivera tout keyboard shortcuts vous devez donc également créer les raccourcis clavier dans ce même script! également keyboard shortcut les actions ne peuvent être appelées que dans javascript!
Pour convertir le code HTML en javascript, php ou ASP.net _ allez ici ! Pour voir tous mes keyboard shortcuts dans un live JSFIDDLE Cliquez ici!
Mise à 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\"> </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\"> </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\"> </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>