Handhabung Taste Ereignisse (F1-F12) mit JavaScript und jQuery, cross-browser

https://stackoverflow.com/questions/424407

05-07-2019
|

Frage

Ich will handle F1-F12 Tasten mit JavaScript und jQuery.

Ich bin nicht sicher, welche Fallstricke es zu vermeiden, und ich bin momentan nicht in der Lage zu test-Implementierungen in jedem anderen Browser als den Internet Explorer 8, Google Chrome und Mozilla FireFox 3.

Irgendwelche Vorschläge, um eine volle cross-browser-Lösung?So etwas wie eine gut getestete Bibliothek jQuery oder vielleicht auch nur Vanille jQuery/JavaScript?

Lösung

Die beste Quelle ich 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 sind und überall sonst im Einklang (mit Ausnahme, dass es kein Tastendruck-Ereignis auf IE, aber ich glaube, keydown Werke).

Andere Tipps

ich mit William stimmen im Allgemeinen, dass es eine schlechte Idee ist es, die Funktionstasten kapern. Das heißt, ich fand die Verknüpfung Bibliothek, die diese Funktionalität hinzufügt, sowie andere Tastatur Verknüpfungen und Kombination, in einer sehr glatten Art und Weise.

Tastendruck:

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

Tastenkombination:

shortcut.add("Ctrl+Shift+A", function() {
    alert("Ctrl Shift A pressed");
});

Ich bin nicht sicher, ob das Abfangen Funktionstasten möglich ist, aber ich würde vermeiden alle zusammen mit Funktionstasten. Funktionstasten werden von Browsern verwendet, um eine Vielzahl von Aufgaben zu erfüllen, einige von ihnen ziemlich häufig. Zum Beispiel in Firefox unter Linux, mindestens sechs oder sieben der Funktionstasten sind reserviert für den Einsatz durch den Browser:

F1 (Hilfe),
F3 (Search),
F5 (Aktualisieren),
F6 (Fokus Adressleiste)
F7 (Caret Browsing-Modus),
F11 (Vollbildmodus) und
F12 (verwendet von mehreren Add-ons, einschließlich Firebug)

Das Schlimmste ist, dass verschiedene Browser auf verschiedenen Betriebssystemen verschiedene Schlüssel für verschiedene Dinge verwendet werden. Das ist eine Menge Unterschiede zu berücksichtigen. Sie sollten häufig verwendete Tastenkombinationen sicherer, weniger halten.

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

erstellen

event.keyCode

Eine weitere Hilfe für alle, ich denke, ist diese Testseite für Intercept die keyCode (einfach kopieren und in neuen file.html für Ihre Veranstaltung 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 ein funktionierendes Demo, so dass Sie es gleich hier ausprobieren können:

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;
}

td,
th {
  border: 2px solid #aaa;
}

<html>

<head>
  <title>Untitled</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</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>

Wow es ist sehr einfach. ich bin Schuld, dies zu schreiben, warum niemand es vorher machen?

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

Lösung in ES6 für moderne Browser und IE11 (mit transpilation bis 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;
};

Versuchen Sie, diese Lösung, wenn Werke.

window.onkeypress = function(e) {
    if ((e.which || e.keyCode) == 116) {
        alert("fresh");
    }
}

Wenn Sie Angularjs für den Umgang mit Ereignissen verwenden, sollten Sie ng-keydown zur Verhinderung pause in developer in Chrom verwenden.

Das funktioniert für mich.

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

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

Eines der Probleme in Einfangen der Tasten F1-F12 ist, dass die Standardfunktion auch außer Kraft gesetzt werden müssen . Hier ist ein Beispiel für eine Implementierung der F1 ‚Hilfe‘ Taste , mit der Überschreibung, die die Standard Hilfe Pop-up verhindert. Diese Lösung kann für die F2-F12-Tasten erweitert werden . Auch dieses Beispiel absichtlich nicht Kombinationstasten erfassen , kann aber 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 lieh mir ein ähnliche Lösung von einem SO Artikel bezog dies in der Entwicklung. Lassen Sie mich wissen, ob dies auch für Sie gearbeitet.

Sie können dies tun, mit jquery wie folgt aus:

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

        });

Fügen Sie eine Verknüpfung:

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

Reagieren Abkürzungen:

$.Shortcuts.start();

Fügen Sie eine Verknüpfung zu der "anderen" - Liste:

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

Aktivieren Sie "andere" - Liste:

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

Stop (unbind event-Handler):

$.Shortcuts.stop();

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

Meine Lösung für dieses Problem ist:

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

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

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow