Scorciatoie da tastiera con jQuery


Risposte:


143

Da quando questa domanda è stata inizialmente posta, John Resig (l'autore principale di jQuery) ha modificato e migliorato il progetto js-hotkeys. La sua versione è disponibile su:

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


6
Supporta la metachiave, qualcosa che non è supportato nel js-hotkeys:) Grazie
Lipis

Ha un pacchetto Nuget, quindi sono andato con questo.
Allineato il

Devo dire che è molto buono per le combinazioni di tasti (specialmente quei tasti speciali come shift, ctrl, alt, ...) ma ho problemi con la mappatura di base 0-9 e az).
Martin,

1
Questa risposta fornisce link utili. Potresti anche rispondere alla domanda originale? Ad esempio "come posso collegare un evento al fuoco se qualcuno preme la lettera g"? Il modulo jquery.hotkeys ha un po 'di documentazione, che sono sicuro sia eccezionale se sai già cosa stai facendo ... ma per quelli di noi che cercano di hackerare qualcosa insieme, una risposta alla domanda originale sarebbe ottima.
Ian Langmore,

Come si evita il gorgogliamento predefinito nel browser? Nulla di menzionato nel readme da quello che vedo.
Gurnard,

86

Che dire dei tasti di scelta rapida jQuery ?

Tasti di scelta rapida jQuery ti consente di controllare gli eventi della tastiera in qualsiasi parte del codice supportando quasi qualsiasi combinazione di tasti.

Per associare Ctrl+ ca una funzione ( f), ad esempio:

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

2
WOW ... questo è probabilmente il plugin più semplice che abbia mai usato!
d -_- b

lavorare con questo immediatamente non impedisce le impostazioni predefinite del browser. Quindi Ctrl + n aprirà una nuova scheda nel browser, ad esempio. Non è possibile accedere all'oggetto evento, quindi non è sicuro di come prevenire Default con questo.
Gurnard,

@Gurnard Probabilmente non dovremmo impedire le impostazioni predefinite dell'utente, tranne in rari casi in cui è stato comunicato all'utente in anticipo e si aspettano tale comportamento all'interno dell'app Web (e forse fornire un'impostazione per la modifica). altrimenti è incredibilmente fastidioso. Esempio 1 : Durante la composizione di un post su Stack Exchange e invece di nascondere il browser, Cmd H marche ## Heading ##appaiono nel campo di testo. Esempio 2 : questa domanda. Esempio 3 : domande e risposte .
Mentalista,

2
@Mentalist Apprezzo il commento UX ma non si applica alla nostra situazione attuale. Voglio solo essere in grado di farlo tecnicamente le decisioni architettoniche e di UX sarebbero un altro post :-)
Gurnard

43

Di recente ho scritto una libreria autonoma per questo. Non richiede jQuery, ma è possibile utilizzarlo con jQuery senza problemi. Si chiama Trappola per topi.

Puoi verificarlo su http://craig.is/killing/mice


4
Questo è molto carino. Apprezzo molto il supporto per la gestione della sequenza di chiavi.
Lorefnon,

2
Sto usando Moustrap e trovo molto meglio il plugin HotKeys. Molto raccomandato. @Crag grazie per l'ottimo lavoro.
Primoz Roma,

1
Mi è piaciuta la documentazione e il modo per prevenire il comportamento predefinito degli elementi. Questa libreria dovrebbe essere su NuGet.
Aamir

Concordato. Questo è superiore. jquery.hotkey non ha sparato in modo errato quando un'area di testo era focalizzata per me, ma non è stato così. Inoltre è meglio in tutti i modi in cui menzionano i commentatori precedenti.
Erosebe,

24

Bene, ci sono molti modi. Ma suppongo che tu sia interessato a un'implementazione avanzata. Pochi giorni fa ero nella stessa ricerca e ne ho trovato uno.

Qui.

È utile per acquisire eventi dalla tastiera e troverai anche le mappe dei personaggi. E la cosa buona è ... è jQuery. Controlla la demo sulla stessa pagina e decidi.

Una biblioteca alternativa è qui .


2
Giusto per chiarire, funziona perfettamente anche senza jquery.
Diss.Thinkr,

16

Se vuoi solo scorciatoie semplici (come 1 lettera, ad esempio solo g) potresti farlo facilmente senza un plug-in aggiuntivo:

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

2
Questo non funziona in IE9. In IE, qualcosa del genere funziona: 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" />

questo sito dice 71 = g ma il codice jQuery sopra ha pensato diversamente

G maiuscola = 71 , la minuscola è 103


8
Usa questo! if (e.which == 103 || e.keyCode == 103 || window.event.keyCode == 103)
Viaggio

Questo accade solo quando ti concentri sul campo di testo
Michael Koper,

Il link è morto :(

8

Puoi anche provare il plugin jQuery shortKeys . Esempio di utilizzo:

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

3

Dopo aver studiato alcuni jQuery alla Codeacademy ho trovato una soluzione per associare una chiave con la proprietà animate. L'idea era di animare senza scorrere per saltare da una sezione all'altra. L'esempio di Codeacademy è stato quello di spostare Mario attraverso il DOM, ma l'ho applicato per le sezioni del mio sito Web (CSS con altezza del 100%). Ecco una parte del codice:

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

Penso che potresti usarlo per qualsiasi lettera e proprietà.

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


1

Esiste una nuova versione di hotKeys.js che funziona con la versione 1.10+ di jQuery. È un piccolo file javascript da 100 righe. 4kb o solo 2kb minimizzato. Ecco alcuni esempi di utilizzo semplice:

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

Clonare il repository da github: https://github.com/realdanielbyrne/HoyKeys.git o andare alla pagina del repository github https://github.com/realdanielbyrne/HoyKeys o fork e contribuire.



1

Ti ho fatto premere il tasto! Ecco il mio codice:

<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

Stavo cercando di fare esattamente la stessa cosa, l'ho realizzato dopo tanto tempo! Ecco il codice che ho finito per usare! Funziona: perfetto! Questo è stato fatto usando shortcuts.js libreria ! aggiunti alcuni altri tasti premuti come esempio!

Basta eseguire il codice snip-it, fare clic all'interno della casella e premere il tasto G tasto!

Nota su ctrl+Fe meta+Fche disabiliterà tutto, keyboard shortcutsquindi devi fare anche le scorciatoie da tastiera nello stesso script! anche le keyboard shortcutazioni possono solo essere richiamatejavascript !

Per convertire html javascript, phpo ASP.netandate qui ! Per vedere tutto miokeyboard shortcuts in un JSFIDDLE live, fai clic qui!

Aggiornare

    <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>
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.