Tastaturkürzel mit jQuery


Antworten:


142

Seit diese Frage ursprünglich gestellt wurde, hat John Resig (der Hauptautor von jQuery) das js-hotkeys-Projekt gespalten und verbessert. Seine Version ist verfügbar unter:

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


6
Es unterstützt den metaSchlüssel, etwas, das im js-hotkeys:) nicht unterstützt wird :) Danke
Lipis

Er hat ein Nuget-Paket, also bin ich mit diesem gegangen.
Ausgerichtet am

Ich muss sagen, es ist sehr gut für Tastenkombinationen (insbesondere für Spezialtasten wie Shift, Strg, Alt, ...), aber ich habe Probleme mit der grundlegenden Zuordnung von 0-9 und az.
Martin

1
Diese Antwort enthält nützliche Links. Könnten Sie auch die ursprüngliche Frage beantworten? Beispiel: "Wie kann ich ein Ereignis mit einem Feuer verbinden, wenn jemand den Buchstaben g drückt?" Das Modul jquery.hotkeys enthält einige Dokumentationen, die sicher großartig sind, wenn Sie bereits wissen, was Sie tun ... aber für diejenigen von uns, die versuchen, etwas zusammen zu hacken, wäre eine Antwort auf die ursprüngliche Frage großartig.
Ian Langmore

Wie verhindern Sie, dass die Standardeinstellungen in den Browser gelangen? In der Readme-Datei wurde nichts von dem erwähnt, was ich sehe.
Gurnard

85

Was ist mit jQuery Hotkeys ?

Mit jQuery Hotkeys können Sie überall in Ihrem Code nach Tastaturereignissen suchen und nahezu jede Tastenkombination unterstützen.

So binden Sie Ctrl+ can eine Funktion ( f), zum Beispiel:

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

2
WOW ... das ist wahrscheinlich das einfachste Plugin, das ich je benutzt habe!
d -_- b

Wenn Sie sofort damit arbeiten, werden die Standardeinstellungen des Browsers nicht verhindert. So öffnet beispielsweise Strg + n einen neuen Tab im Browser. Es gibt keinen Zugriff auf das Ereignisobjekt, daher sind Sie sich nicht sicher, wie Sie Default damit verhindern können.
Gurnard

@Gurnard Wir sollten Benutzerstandards wahrscheinlich nicht verhindern, außer in seltenen Fällen, in denen sie dem Benutzer im Voraus mitgeteilt wurden und er dieses Verhalten in der Web-App erwartet (und möglicherweise eine Einstellung bereitstellt, um es zu ändern). Ansonsten ist es unglaublich nervig. Beispiel 1 : Wenn ein Kommentar auf Stapel von Exchange Komponieren und stattdessen den Browser des Verstecken, Cmd H Marken ## Heading ##erscheinen im Textfeld ein . Beispiel 2 : Diese Frage. Beispiel 3 : Diese Fragen und Antworten .
Mentalist

2
@Mentalist Ich schätze den UX-Kommentar, aber er gilt in unserer aktuellen Situation nicht. Ich möchte nur in der Lage sein, dies technisch zu tun. Die Architektur- und UX-Entscheidungen wären ein weiterer Beitrag :-)
Gurnard

43

Ich habe kürzlich eine eigenständige Bibliothek dafür geschrieben. Es erfordert keine jQuery, aber Sie können es mit jQuery problemlos verwenden. Es heißt Mausefalle.

Sie können es unter http://craig.is/killing/mice überprüfen


4
Das ist sehr nett. Ich schätze die Unterstützung für die Handhabung der Tastenfolge sehr.
Lorefnon

2
Ich benutze Moustrap und finde es viel besser als das HotKeys-Plugin. Sehr zu empfehlen. @Crag danke für die gute Arbeit.
Primoz Rom

1
Ich mochte die Dokumentation sowie die Möglichkeit, das Standardverhalten der Elemente zu verhindern. Diese Bibliothek sollte auf NuGet sein.
Aamir

Einverstanden. Das ist überlegen. jquery.hotkey wurde nicht falsch ausgelöst, wenn ein Textbereich für mich den Fokus hatte, aber das tat es nicht. Es ist auch besser in jeder Hinsicht, die frühere Kommentatoren erwähnen.
Erosebe

24

Nun, es gibt viele Möglichkeiten. Aber ich vermute, Sie sind an einer fortgeschrittenen Implementierung interessiert. Vor ein paar Tagen war ich auf der gleichen Suche und habe einen gefunden.

Hier.

Es ist gut für die Erfassung von Ereignissen über die Tastatur und Sie finden auch die Charakterkarten. Und das Gute ist ... es ist jQuery. Überprüfen Sie die Demo auf derselben Seite und entscheiden Sie.

Eine alternative Bibliothek ist hier .


2
Nur um es klar zu machen, funktioniert es auch ohne Abfrage perfekt.
Diff.Thinkr

16

Wenn Sie nur einfache Verknüpfungen möchten (wie zum Beispiel nur 1 Buchstabe g), können Sie dies problemlos ohne ein zusätzliches Plugin tun:

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

2
Dies funktioniert in IE9 nicht. Im IE funktioniert so etwas: 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" />

Diese Seite sagt 71 = g, aber der obige jQuery-Code dachte anders

Großbuchstabe G = 71 , Kleinbuchstabe ist 103


8
Benutze das! if (e.which == 103 || e.keyCode == 103 || window.event.keyCode == 103)
Trip

Dies geschieht nur, wenn Sie sich auf das Textfeld konzentrieren
Michael Koper

Der Link ist tot :(

8

Sie können auch das shortKeys jQuery-Plugin ausprobieren . Anwendungsbeispiel:

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

3

Nachdem ich an der Codeacademy jQuery studiert hatte, fand ich eine Lösung, um einen Schlüssel mit der animierten Eigenschaft zu binden. Die ganze Idee war, ohne Scrollen zu animieren, um von einem Abschnitt zum anderen zu springen. Das Beispiel der Codeacademy war, Mario durch das DOM zu bewegen, aber ich habe dies für meine Website-Abschnitte angewendet (CSS mit 100% Höhe). Hier ist ein Teil des Codes:

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

Ich denke, Sie könnten dies für jeden Brief und jedes Eigentum verwenden.

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


1

Es gibt eine neue Version von hotKeys.js, die mit der Version 1.10+ von jQuery funktioniert. Es ist eine kleine Javascript-Datei mit 100 Zeilen. 4kb oder nur 2kb minimiert. Hier sind einige einfache Verwendungsbeispiele:

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

Klonen Sie das Repo von Github: https://github.com/realdanielbyrne/HoyKeys.git oder gehen Sie zur Github-Repo-Seite https://github.com/realdanielbyrne/HoyKeys oder Fork und tragen Sie dazu bei.



1

Ich habe dich zum Tastendruck gemacht! Hier ist mein 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>


0

Ich habe versucht, genau das Gleiche zu tun, das habe ich nach langer Zeit erreicht! Hier ist der Code, den ich letztendlich verwendet habe! Es funktioniert: Perfekt! Dies wurde mithilfe der Bibliothek shortcuts.js erledigt! fügte ein paar andere Tastendrücke als Beispiel hinzu!

Führen Sie einfach den Code snip-it aus, klicken Sie in das Feld und drücken Sie die GTaste!

Beachten Sie das ctrl+Fund meta+Fdas deaktiviert alles, keyboard shortcutsso dass Sie die Tastaturkürzel auch in demselben Skript erstellen müssen! auch die keyboard shortcutaktionen können nur aufgerufen werden javascript!

So konvertieren html javascript, phpoder ASP.netgehen hier ! Um alle meine keyboard shortcutsin einem Live-JSFIDDLE zu sehen, klicken Sie hier!

Aktualisieren

    <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>
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.