Behandlung von Tastendruckereignissen (F1-F12) mit JavaScript und jQuery, browserübergreifend

77

Ich möchte F1-F12-Schlüssel mit JavaScript und jQuery verarbeiten.

Ich bin mir nicht sicher, welche Fallstricke zu vermeiden sind, und ich kann derzeit keine Implementierungen in anderen Browsern als Internet Explorer 8, Google Chrome und Mozilla FireFox 3 testen.

Irgendwelche Vorschläge für eine vollständige Cross-Browser-Lösung? So etwas wie eine gut getestete jQuery-Bibliothek oder einfach nur Vanille-jQuery / JavaScript?

javascript jquery events keyboard keyboard-events cllpse
quelle

Antworten:

22

Die beste Quelle für diese Art von Frage ist diese Seite: http://www.quirksmode.org/js/keys.html

Was sie sagen ist, dass die Schlüsselcodes auf Safari ungerade und überall konsistent sind (außer dass es im IE kein Tastendruckereignis gibt, aber ich glaube, dass Keydown funktioniert).

mcherm
quelle
1
Ich habe vergessen, wo ich es gefunden habe, aber Jan Wolter hat auch eine großartige Seite über JavaScript-Tastaturereignisse geschrieben: unixpapa.com/js/key.html
Paul D. Waite
47

Ich stimme William zu, dass es im Allgemeinen eine schlechte Idee ist, die Funktionstasten zu entführen. Trotzdem habe ich die Verknüpfungsbibliothek , die diese Funktionalität hinzufügt, sowie andere Tastaturkürzel und -kombinationen auf sehr raffinierte Weise gefunden.

Einzelner Tastendruck:

shortcut.add("F1", function() {
    alert("F1 pressed");
});

Kombination von Tastenanschlägen:

shortcut.add("Ctrl+Shift+A", function() {
    alert("Ctrl Shift A pressed");
});
matsev
quelle
1
Sieht aus wie eine wirklich schöne Bibliothek! Danke, dass du es geteilt hast.
Alvaro Flaño Larrondo
Funktioniert perfekt mit
neuem
27

Ich bin nicht sicher, ob das Abfangen von Funktionstasten möglich ist, aber ich würde es vermeiden, alle Funktionstasten zusammen zu verwenden. Funktionstasten werden von Browsern verwendet, um eine Vielzahl von Aufgaben auszuführen, von denen einige häufig vorkommen. In Firefox unter Linux sind beispielsweise mindestens sechs oder sieben der Funktionstasten für die Verwendung durch den Browser reserviert:

  • F1 (Hilfe),
  • F3 (Suche),
  • F5 (Aktualisieren),
  • F6 (Fokusadressleiste),
  • F7 (Caret-Browsing-Modus),
  • F11 (Vollbildmodus) und
  • F12 (wird von mehreren Add-Ons verwendet, einschließlich Firebug)

Das Schlimmste ist, dass verschiedene Browser unter verschiedenen Betriebssystemen unterschiedliche Schlüssel für unterschiedliche Zwecke verwenden. Das sind viele Unterschiede, die berücksichtigt werden müssen. Sie sollten sich an sicherere, weniger häufig verwendete Tastenkombinationen halten.

William Brendel
quelle
6
Ja, ich weiß, dass einige Schlüssel reserviert sind. Dennoch; Ich möchte alle Schlüssel verwenden, die es nicht sind.
Cllpse
1
Auf meinem Computer sind alle F-Tasten reserviert. Verwenden von Opera mit einer benutzerdefinierten Verknüpfung. NIEMALS verlassen wir uns auf Konventionen für "häufig nicht reservierte Schlüssel".
Gizmo
Gibt es einen bestimmten Grund? Es fällt mir nur schwer, mir eine Situation vorzustellen, in der Funktionstasten erforderlich wären. Das ist reine Neugier meinerseits; Ich versuche nicht, Ihnen etwas auszureden, sondern nur Alternativen vorzuschlagen.
William Brendel
5
"Ich möchte alle Schlüssel verwenden, die nicht vorhanden sind" - Sie können nicht programmgesteuert feststellen, welche Schlüssel nicht reserviert sind. Die Übernahme der Funktionstasten mag für Ihre App in Ordnung sein, ist aber schwer zu sagen.
Paul D. Waite
3
@ WilliamBrendel Ich arbeite mit einem Handheld-Industriescanner. Ich muss Funktionstasten verwenden.
Bmo
17

Wow es ist sehr einfach. Ich bin schuld daran, dies zu schreiben, warum schafft es noch niemand?

$(function(){
    //Yes! use keydown 'cus some keys is fired only in this trigger,
    //such arrows keys
    $("body").keydown(function(e){
         //well you need keep on mind that your browser use some keys 
         //to call some function, so we'll prevent this
         e.preventDefault();

         //now we caught the key code, yabadabadoo!!
         var keyCode = e.keyCode || e.which;

         //your keyCode contains the key code, F1 to F12 
         //is among 112 and 123. Just it.
         console.log(keyCode);       
    });
});
Aloiso Gomes
quelle
Vielen Dank, der Aufruf von prefentDefault ist der Schlüssel.
Lars Brinkhoff
Glattes Wortspiel Lars
Zanderwar
11

Ohne andere externe Klasse können Sie Ihren persönlichen Hack-Code einfach mit erstellen 

event.keyCode

Eine weitere Hilfe für alle, denke ich, ist diese Testseite zum Abfangen des Schlüsselcodes (einfach kopieren und in die neue Datei.html einfügen, um Ihr Ereignis zu testen).

 <html>
 <head>
 <title>Untitled</title>
 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
 <style type="text/css">
 td,th{border:2px solid #aaa;}
 </style>
 <script type="text/javascript">
 var t_cel,tc_ln;
 if(document.addEventListener){ //code for Moz
   document.addEventListener("keydown",keyCapt,false); 
   document.addEventListener("keyup",keyCapt,false);
   document.addEventListener("keypress",keyCapt,false);
 }else{
   document.attachEvent("onkeydown",keyCapt); //code for IE
   document.attachEvent("onkeyup",keyCapt); 
   document.attachEvent("onkeypress",keyCapt); 
 }
 function keyCapt(e){
   if(typeof window.event!="undefined"){
    e=window.event;//code for IE
   }
   if(e.type=="keydown"){
    t_cel[0].innerHTML=e.keyCode;
    t_cel[3].innerHTML=e.charCode;
   }else if(e.type=="keyup"){
    t_cel[1].innerHTML=e.keyCode;
    t_cel[4].innerHTML=e.charCode;
   }else if(e.type=="keypress"){
    t_cel[2].innerHTML=e.keyCode;
    t_cel[5].innerHTML=e.charCode;
   }
 }
 window.onload=function(){
   t_cel=document.getElementById("tblOne").getElementsByTagName("td");
   tc_ln=t_cel.length;
 }
 </script>
 </head>
 <body>
 <table id="tblOne">
 <tr>
 <th style="border:none;"></th><th>onkeydown</th><th>onkeyup</th><th>onkeypress</td>
 </tr>
 <tr>
 <th>keyCode</th><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
 </tr>
 <tr>
 <th>charCode</th><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
 </tr>
 </table>
 <button onclick="for(i=0;i<tc_ln;i++){t_cel[i].innerHTML='&nbsp;'};">CLEAR</button>
 </body>
 </html>

Hier ist eine funktionierende Demo, die Sie hier ausprobieren können:

Code-Snippet anzeigen

Paladinux
quelle
1
Danke @paladinux, dein Code funktioniert gut für mich. Ich passe es an, um benutzerdefinierte Funktionen beim Tastendruck aufzurufen. Aber ich stehe vor einem Problem. Immer wenn ich die Zeichen 'q, r, s, t, u' eingebe, führt die Seite automatisch die benutzerdefinierten Funktionen aus, da diese Tasten dieselben Tastencodes wie die Funktionstasten F2 ... F7 (113..118) haben
raj
5

Lösung in ES6 für moderne Browser und IE11 (mit Transpilation auf ES5):

//Disable default IE help popup
window.onhelp = function() {
    return false;
};
window.onkeydown = evt => {
    switch (evt.keyCode) {
        //ESC
        case 27:
            this.onEsc();
            break;
        //F1
        case 112:
            this.onF1();
            break;
        //Fallback to default browser behaviour
        default:
            return true;
    }
    //Returning false overrides default browser event
    return false;
};
Keemor
quelle
Vielleicht die this.onXEreignisse beheben , damit das Beispiel portabler ist?
mix3d
1

Das funktioniert bei mir.

if(code ==112) { alert("F1 was pressed!!"); return false; }

F2 - 113, F3 - 114, F4 - 115 und so weiter.

Christine
quelle
1

Eines der Probleme beim Abfangen der Tasten F1-F12 besteht darin, dass die Standardfunktion ebenfalls überschrieben werden muss . Hier ist ein Beispiel für eine Implementierung der F1-Taste "Hilfe" mit der Überschreibung, die das Popup der Standardhilfe verhindert. Diese Lösung kann für die Tasten F2-F12 erweitert werden . In diesem Beispiel werden absichtlich keine Kombinationsschlüssel erfasst , dies kann jedoch auch geändert werden.

<html>
<head>
<!-- Note:  reference your JQuery library here -->
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<body>
    <h1>F-key trap example</h1>
    <div><h2>Example:  Press the 'F1' key to open help</h2></div>
    <script type="text/javascript">
        //uncomment to prevent on startup
        //removeDefaultFunction();          
        /** Prevents the default function such as the help pop-up **/
        function removeDefaultFunction()
        {
            window.onhelp = function () { return false; }
        }
        /** use keydown event and trap only the F-key, 
            but not combinations with SHIFT/CTRL/ALT **/
        $(window).bind('keydown', function(e) {
            //This is the F1 key code, but NOT with SHIFT/CTRL/ALT
            var keyCode = e.keyCode || e.which;
            if((keyCode == 112 || e.key == 'F1') && 
                    !(event.altKey ||event.ctrlKey || event.shiftKey || event.metaKey))
             {
                // prevent code starts here:
                removeDefaultFunction();
                e.cancelable = true;
                e.stopPropagation();
                e.preventDefault();
                e.returnValue = false;
                // Open help window here instead of alert
                alert('F1 Help key opened, ' + keyCode);
                }
            // Add other F-keys here:
            else if((keyCode == 113 || e.key == 'F2') && 
                    !(event.altKey ||event.ctrlKey || event.shiftKey || event.metaKey))
             {
                // prevent code starts here:
                removeDefaultFunction();
                e.cancelable = true;
                e.stopPropagation();
                e.preventDefault();
                e.returnValue = false;
                // Do something else for F2
                alert('F2 key opened, ' + keyCode);
                }
        });
    </script>
</body>
</html>

Ich habe mir bei der Entwicklung eine ähnliche Lösung aus einem verwandten SO-Artikel ausgeliehen. Lassen Sie mich wissen, ob dies auch für Sie funktioniert hat.

MAbraham1
quelle
0

Probieren Sie diese Lösung aus, wenn sie funktioniert.

window.onkeypress = function(e) {
    if ((e.which || e.keyCode) == 116) {
        alert("fresh");
    }
}
Nasir Shafique
quelle
Wie haben Sie den Wert 116 erraten?
Basile Starynkevitch
@ BasileStarynkevitch bitte sehen Sie diese .. help.adobe.com/en_US/AS2LCR/Flash_10.0/…
Ofir Attia
@ BasileStarynkevitch Ich fand meinen Schlüsselcode-Wert, indem ich einen Haltepunkt an der richtigen Stelle setzte und event.which (die Ereigniseigenschaft, die die entsprechenden Informationen enthält) inspizierte
Juan Lanus
0

Wenn Sie angle.js zum Behandeln von Ereignissen verwenden, sollten Sie dies ng-keydownzum Verhindern pause in developervon Chrome verwenden.

Mohamad Shiralizadeh
quelle
-1

Fügen Sie eine Verknüpfung hinzu:

$.Shortcuts.add({
    type: 'down',
    mask: 'Ctrl+A',
    handler: function() {
        debug('Ctrl+A');
    }
});

Reagieren Sie auf Verknüpfungen:

$.Shortcuts.start();

Fügen Sie eine Verknüpfung zu einer anderen Liste hinzu:

$.Shortcuts.add({
    type: 'hold',
    mask: 'Shift+Up',
    handler: function() {
        debug('Shift+Up');
    },
    list: 'another'
});

Aktivieren Sie "eine andere" Liste:

$.Shortcuts.start('another');
Remove a shortcut:
$.Shortcuts.remove({
    type: 'hold',
    mask: 'Shift+Up',
    list: 'another'
});

Stop (Ereignishandler aufheben):

$.Shortcuts.stop();


Tutorial:
http://www.stepanreznikov.com/js-shortcuts/

KingRider
quelle
-1

Meine Lösung für dieses Problem lautet:

document.onkeypress = function (event) {
    event = (event || window.event);
    if (event.keyCode == 123) { 
         return false;
    }
}

Mit der magischen Zahl, 123die der Schlüssel F12 ist.

Daooji Katara
quelle
-1

Sie können dies mit jquery wie folgt tun:

        $("#elemenId").keydown(function (e) {
            if(e.key == "F12"){
                console.log(e.key);
            }

        });
Javier Menéndez Rizo
quelle