web-dev-qa-db-fra.com

Gestion des événements liés aux touches (F1 à F12) à l'aide de JavaScript et de jQuery, navigateur croisé

Je veux gérer les clés F1-F12 en utilisant JavaScript et jQuery.

Je ne suis pas sûr des pièges à éviter et je ne suis pas en mesure de tester les implémentations dans des navigateurs autres qu'Internet Explorer 8, Google Chrome et Mozilla FireFox 3.

Des suggestions pour une solution complète multi-navigateur? Quelque chose comme une bibliothèque jQuery bien testée ou peut-être juste Vanilla jQuery/JavaScript?

javascriptjqueryeventskeyboardkeyboard-events
60
cllpse

La meilleure source que j'ai pour ce genre de question est cette page: http://www.quirksmode.org/js/keys.html

Ce qu'ils disent, c'est que les codes de clé sont étranges sur Safari et cohérents partout ailleurs (sauf qu'il n'y a pas d'événement de frappe sur IE, mais je crois que les raccourcis clavier fonctionnent).

20
mcherm

Je suis d'accord avec William pour dire qu'en général, détourner les touches de fonction est une mauvaise idée. Cela dit, j’ai trouvé le raccourci - qui ajoute cette fonctionnalité, ainsi que d’autres raccourcis clavier et combinaisons, de manière très simple.

Une seule frappe:

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

Combinaison de frappes:

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

Je ne sais pas si l'interception de touches de fonction est possible, mais je ne voudrais pas utiliser toutes les touches de fonction ensemble. Les navigateurs utilisent les touches de fonction pour effectuer diverses tâches, dont certaines sont assez courantes. Par exemple, dans Firefox sous Linux, au moins six ou sept des touches de fonction sont réservées au navigateur:

  • F1 (Aide),
  • F3 (Recherche),
  • F5 (rafraîchir),
  • F6 (barre d'adresse de mise au point),
  • F7 (mode navigation),
  • F11 (mode plein écran), et 
  • F12 (utilisé par plusieurs add-ons, y compris Firebug)

Le pire, c’est que différents navigateurs, sur différents systèmes d’exploitation, utilisent différentes clés pour différentes choses. C'est beaucoup de différences à prendre en compte. Vous devez vous en tenir à des combinaisons de touches plus sûres et moins utilisées.

26
William Brendel

Sans autre classe externe, vous pouvez créer votre code de piratage personnel simplement en utilisant 

event.keyCode

Une autre aide pour tous, je pense, est cette page de test pour intercepter le code clé (il suffit de copier et coller dans le nouveau fichier.html pour tester votre événement).

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

Voici une démo en marche que vous pouvez essayer ici:

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 c'est très simple. Je suis blâmé pour écrire ceci, pourquoi personne ne le fait avant?

$(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

Solution dans ES6 pour navigateurs modernes et IE11 (avec transpilation à 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

Cela fonctionne pour moi. 

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

F2 - 113, F3 - 114, F4 - 115,

0
Christine

L'un des problèmes liés à l'interception des touches F1-F12 est que la fonction par défaut doit également être remplacée. Voici un exemple d'implémentation de la touche F1 'Aide', avec le remplacement qui empêche l'affichage de l'aide par défaut. Cette solution peut être étendue aux touches F2 à F12. De plus, cet exemple ne capture pas à dessein les combinaisons de touches, mais cela peut également être modifié.

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

J'ai emprunté un solution similaire à un article connexe SO en développant ceci. Faites-moi savoir si cela a fonctionné pour vous aussi.

0
MAbraham1

Essayez cette solution si cela fonctionne.

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

Lorsque vous utilisez angular.js pour gérer les événements, vous devez utiliser ng-keydown pour empêcher pause in developer en chrome.

0
Mohamad Shiralizadeh

Vous pouvez le faire avec jQuery comme ceci:

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

        });
0
Javier Menéndez Rizo