Обробка подій натискання клавіш (F1-F12) за допомогою JavaScript та jQuery, крос-браузер

Question 1

Я хочу обробляти клавіші F1-F12 за допомогою JavaScript та jQuery.

Я не впевнений, яких підводних каменів слід уникати, і наразі я не можу протестувати реалізації в будь-яких інших браузерах, крім Internet Explorer 8, Google Chrome та Mozilla FireFox 3.

Будь-які пропозиції щодо повного крос-браузерного рішення? Щось на зразок добре перевіреної бібліотеки jQuery чи, можливо, просто ванільної jQuery / JavaScript?

Question 2

Найкраще джерело для цього запитання - це ця сторінка: http://www.quirksmode.org/js/keys.html

Вони кажуть, що коди клавіш непарні в Safari і узгоджуються скрізь (за винятком того, що в IE немає події натискання клавіш, але я вважаю, що клавіатура працює).

Question 3

Я погоджуюсь з Вільямом, що взагалі погано викрадати функціональні клавіші. Тим не менш, я знайшов бібліотеку ярликів, яка додає цю функціональність, а також інші комбінації клавіш та їх комбінацію дуже тонко.

Одне натискання клавіші:

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

Поєднання натискань клавіш:

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

Question 4

Я не впевнений, чи можливий перехоплення функціональних клавіш, але я б уникав використання функціональних клавіш разом. Функціональні клавіші використовуються браузерами для виконання різноманітних завдань, деякі з них досить поширені. Наприклад, у Firefox на Linux принаймні шість чи сім функціональних клавіш зарезервовані для використання браузером:

F1 (Довідка),
F3 (пошук),
F5 (Оновити),
F6 (адресний рядок фокусування),
F7 (режим перегляду каретки),
F11 (повноекранний режим) та
F12 (використовується кількома доповненнями, включаючи Firebug)

Найгірше те, що різні браузери в різних операційних системах використовують різні клавіші для різних речей. Це багато відмінностей, на які слід зважати. Слід дотримуватися більш безпечних, рідше використовуваних комбінацій клавіш.

Question 5

Вау, це дуже просто. я винен написати це, чому ніхто не робить це раніше?

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

Question 6

Не маючи іншого зовнішнього класу, ви можете створити свій особистий код злому, просто використовуючи

event.keyCode

Ще одна допомога для всіх, на мою думку, це тестова сторінка для перехоплення keyCode (просто скопіюйте та пропустіть у новий файл.html для тестування вашої події).

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

Ось робоча демонстрація, щоб ви могли спробувати її тут:

Показати фрагмент коду

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>

Expand snippet

Question 7

Рішення в ES6 для сучасних браузерів та IE11 (з перекладом на 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;
};

Question 8

Це працює для мене.

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

F2 - 113, F3 - 114, F4 - 115 і так далі.

Question 9

Однією з проблем захоплення клавіш F1-F12 є те, що функція за замовчуванням також повинна бути замінена . Ось приклад реалізації клавіші F1 "Довідка" із заміною, яка запобігає спливаючому меню довідки за замовчуванням. Це рішення можна розширити для клавіш F2-F12 . Крім того, цей приклад навмисно не фіксує комбінаційні клавіші , але це також можна змінити.

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

Подібне рішення я запозичив у відповідній статті SO, розробляючи це. Повідомте мене, чи це спрацювало і у вас.

Question 10

Спробуйте це рішення, якщо воно працює.

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

Question 11

Коли ви використовуєте angular.js для обробки подій, ви повинні використовувати ng-keydownдля запобігання pause in developerв chrome.

Question 12

Додайте ярлик:

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

Почніть реагувати на ярлики:

$.Shortcuts.start();

Додайте ярлик до “іншого” списку:

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

Активуйте “інший” список:

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

Зупинити (розв’язати обробники подій):

$.Shortcuts.stop();

Підручник:
http://www.stepanreznikov.com/js-shortcuts/

Question 13

Моє рішення цієї проблеми:

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

З магічним числом, 123яке є ключем F12.

Question 14

Ви можете зробити це за допомогою jquery таким чином:

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

        });