wake-up-neo.com

Umgang mit Tastendruckereignissen (F1-F12) mit JavaScript und jQuery, Browserübergreifend

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

Ich bin 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.

Anregungen für eine vollständige Browserübergreifende Lösung? Etwas wie eine erprobte jQuery-Bibliothek oder vielleicht nur Vanilla jQuery/JavaScript?

javascriptjqueryeventskeyboardkeyboard-events
60
cllpse

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

Was sie sagen, ist, dass die Tastencodes auf Safari ungerade und überall konsistent sind (abgesehen davon, dass es keinen Tastendruckereignis im IE gibt, aber ich glaube, dass der Keydown funktioniert).

20
mcherm

Ich stimme mit William darin überein, dass es im Allgemeinen eine schlechte Idee ist, die Funktionstasten zu entführen. Ich fand jedoch die Bibliothek shortcut , die diese Funktionalität sowie andere Tastenkombinationen und Tastenkombinationen auf eine sehr glatte Art und Weise hinzufügt.

Einziger Tastendruck:

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

Tastenkombinationen:

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

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 recht häufig sind. Zum Beispiel sind in Firefox unter Linux 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 einschließlich Firebug verwendet)

Das Schlimmste ist, dass verschiedene Browser auf verschiedenen Betriebssystemen unterschiedliche Tasten für unterschiedliche Zwecke verwenden. Das sind viele Unterschiede. Sie sollten sicherere, weniger häufig verwendete Tastenkombinationen verwenden.

26
William Brendel

Ohne eine andere externe Klasse können Sie einfach Ihren persönlichen Hackcode erstellen 

event.keyCode

Eine weitere Hilfe für alle, denke ich, ist diese Testseite, um den keyCode abzufangen (einfach kopieren und in new file.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, 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>

10
paladinux

Wow, das ist sehr einfach. Ich bin schuld, dies zu schreiben, warum macht es niemand vorher?

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

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

Das funktioniert für mich. 

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

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

0
Christine

Ein Problem beim Überfüllen der F1-F12-Tasten ist, dass die Standardfunktion muss ebenfalls überschrieben werden. Hier ist ein Beispiel für eine Implementierung der F1-Hilfetaste mit der Überschreibung, die das Standardhilfefenster verhindert. Diese Lösung kann für die Tasten F2-F12 erweitert werden. Dieses Beispiel absichtlich erfasst keine Kombinationstasten, kann jedoch ebenfalls 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 eine ähnliche Lösung aus einem verwandten SO - Artikel in der Entwicklung dieser geliehen. Lassen Sie mich wissen, ob dies auch für Sie funktioniert hat.

0
MAbraham1

Versuchen Sie es mit dieser Lösung.

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

Wenn Sie angle.js zur Behandlung von Ereignissen verwenden, sollten Sie ng-keydown verwenden, um pause in developer in Chrome zu verhindern.

0
Mohamad Shiralizadeh

Das kann man mit jquery so machen:

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

        });
0
Javier Menéndez Rizo