wake-up-neo.net

Tastaturkürzel mit jQuery

Wie kann ich ein Ereignis zum Auslösen verdrahten, wenn jemand auf den Brief drückt? g?

(Wo ist die Zeichentabelle für alle Buchstaben BTW?)

180
yoyo19

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

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

139
npad

Was ist mit jQuery Hotkeys ?

mit jQuery Hotkeys können Sie überall im Code nach Tastaturereignissen suchen, wobei nahezu jede Tastenkombination unterstützt wird.

Zu binden Ctrl+c zu einer Funktion (f), zum Beispiel:

$(document).bind('keydown', 'ctrl+c', f);
82
Ionuț Staicu

Ich habe kürzlich eine eigenständige Bibliothek dafür geschrieben. JQuery wird nicht benötigt, kann aber problemlos mit jQuery verwendet werden. Es heißt Mausefalle.

Du kannst es dir unter http://craig.is/killing/mice ansehen

41
Craig

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

hier.

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

Eine alternative Bibliothek ist hier .

24
simplyharsh
    <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 jQuery-Code oben dachte anders

Groß- und Kleinschreibung G = 71 ist 103

15
hunter

Wenn Sie nur einfache Verknüpfungen (wie 1 Buchstabe, zum Beispiel nur g) Sie könnten es leicht ohne ein zusätzliches Plugin tun:

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

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

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

Nach dem Studium von jQuery an der Codeacademy fand ich eine Lösung, um einen Schlüssel mit der Eigenschaft animate zu verknüpfen. Die ganze Idee war zu animieren, ohne zu scrollen, 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 (CSS mit 100% Größe) angewendet. 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

3
Maikeximu

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

$('#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 rufen Sie die Seite mit den Github-Repos auf https://github.com/realdanielbyrne/HoyKeys = oder gabeln und beitragen.

1
realdanielbyrne

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

Ähnlich wie bei @craig habe ich kürzlich eine Shortcut-Bibliothek erstellt.

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

Verkettbare API mit Unterstützung für mehrere Funktionen, die an eine Verknüpfung gebunden sind.

1
Blaine Kasten

Ich habe versucht, genau dasselbe zu tun, das habe ich nach langer Zeit erreicht! Hier ist der Code, den ich letztendlich benutzt habe! Es funktioniert: Perfekt! Dies wurde mit der Bibliothek shortcuts.js erledigt! ein paar andere Tastendrücke als Beispiel hinzugefügt!

Führen Sie einfach den Code snip-it aus, klicken Sie in das Kästchen und drücken Sie die G Schlüssel!

Beachten Sie auf der ctrl+F und meta+F das wird alles deaktivieren keyboard shortcuts Sie müssen also auch die Tastaturkürzel in demselben Skript erstellen! auch der keyboard shortcut Aktionen können nur in javascript aufgerufen werden!

So konvertieren Sie HTML in javascript, php oder ASP.net go hier ! Um alle meine zu sehen keyboard shortcuts in einem Live-JSFIDDLE 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>
0
user8529958