Обработка событий нажатия клавиш (F1-F12) с использованием JavaScript и jQuery, кросс-браузер - PullRequest
Новая
       55

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

63 голосов
/ 08 января 2009

Я хочу обработать клавиши F1-F12, используя JavaScript и jQuery.

Я не уверен, какие подводные камни следует избегать, и в настоящее время я не могу протестировать реализации в любых других браузерах, кроме Internet Explorer 8, Google Chrome и Mozilla FireFox 3.

Какие-либо предложения для полного кросс-браузерного решения? Что-то вроде хорошо протестированной библиотеки jQuery или, может быть, просто ванильный jQuery / JavaScript?

Ответы [ 13 ]

41 голосов
/ 10 января 2012

Я согласен с Уильямом, что вообще плохая идея взломать функциональные клавиши. Тем не менее, я нашел библиотеку ярлык , которая добавляет эту функциональность, а также другие сочетания клавиш и комбинации, очень гладко.

Одно нажатие клавиши: 

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

Комбинация нажатий клавиш: 

shortcut.add("Ctrl+Shift+A", function() {
    alert("Ctrl Shift A pressed");
});
26 голосов
/ 08 января 2009

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

  • F1 (Справка),
  • F3 (Поиск),
  • F5 (Обновить),
  • F6 (адресная строка фокуса),
  • F7 (режим просмотра каретки),
  • F11 (полноэкранный режим) и
  • F12 (используется несколькими дополнениями, включая Firebug)

Хуже всего то, что разные браузеры в разных операционных системах используют разные ключи для разных вещей. Это много различий для учета. Вы должны придерживаться более безопасных, менее часто используемых комбинаций клавиш.

20 голосов
/ 12 января 2009

Лучший источник для такого рода вопросов - эта страница: http://www.quirksmode.org/js/keys.html

Что они говорят, так это то, что коды клавиш нечетны в Safari и согласованы везде (за исключением того, что в IE нет события нажатия клавиш, но я считаю, что нажатие клавиш работает).

10 голосов
/ 04 апреля 2013

Без других внешних классов вы можете создать свой персональный хак-код, просто используя 

event.keyCode

Еще одна помощь для всех, я думаю, это тестовая страница для перехвата ключевого кода (просто скопируйте и вставьте новый файл file.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>
9 голосов
/ 18 ноября 2016

Ух, это очень просто. Я виноват, что написал это, почему никто не сделал это раньше? 

$(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);       
    });
});
3 голосов
/ 26 октября 2017

Решение в 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;
};
0 голосов
/ 24 декабря 2018

Вы можете сделать это с помощью jquery следующим образом: 

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

        });
0 голосов
/ 27 марта 2018

Мое решение этой проблемы: 

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

С магическим числом 123, которое является ключом F12.

0 голосов
/ 23 февраля 2017

Одна из проблем при захвате клавиш F1-F12 заключается в том, что функция по умолчанию также должна быть переопределена . Вот пример реализации клавиши «Справка» F1100 с переопределением, которое предотвращает всплывающее окно справки по умолчанию. Это решение может быть расширено для клавиш 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 при разработке этого. Дайте мне знать, если это сработало и для вас.

0 голосов
/ 13 января 2017

Это работает для меня.

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

F2 - 113, F3 - 114, F4 - 115, и так форт.

Страница:
...