83

我想使用 JavaScript 和 jQuery 处理 F1-F12 键。

我不确定要避免哪些陷阱，而且我目前无法在 Internet Explorer 8、Google Chrome 和 Mozilla FireFox 3 之外的任何其他浏览器中测试实现。

对完整的跨浏览器解决方案有什么建议吗？类似于经过良好测试的 jQuery 库，或者只是普通的 jQuery/JavaScript？

4

13 回答 13

50

我同意威廉的观点，一般来说劫持功能键是个坏主意。也就是说，我以一种非常巧妙的方式找到了添加此功能的快捷方式库，以及其他键盘快捷方式和组合。

单次击键：

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

按键组合：

shortcut.add("Ctrl+Shift+A", function() {
    alert("Ctrl Shift A pressed");
});
于 2012-01-10T12:08:08.297 回答
27

我不确定是否可以拦截功能键，但我会避免一起使用功能键。浏览器使用功能键来执行各种任务，其中一些非常常见。例如，在 Linux 上的 Firefox 中，至少有六个或七个功能键保留给浏览器使用：

  • F1（帮助），
  • F3（搜索），
  • F5（刷新），
  • F6（焦点地址栏），
  • F7（插入符号浏览模式），
  • F11（全屏模式），以及
  • F12（由多个附加组件使用，包括 Firebug）

最糟糕的是，不同操作系统上的不同浏览器对不同的事情使用不同的密钥。这需要解释很多差异。你应该坚持使用更安全、不常用的组合键。

于 2009-01-08T14:35:48.893 回答
27

我对这类问题的最佳来源是这个页面：http ://www.quirksmode.org/js/keys.html

他们说的是 Safari 上的键码很奇怪，并且在其他任何地方都是一致的（除了 IE 上没有按键事件，但我相信 keydown 有效）。

于 2009-01-12T18:36:40.550 回答
24

这很简单。

$(function(){
    //Yes! use keydown because some keys are fired only in this trigger,
    //such arrows keys
    $("body").keydown(function(e){
         //well so 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.
         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);       
    });
});
于 2016-11-18T10:48:17.870 回答
12

没有其他外部类，您只需使用即可创建您的个人黑客代码

event.keyCode

对所有人的另一个帮助，我认为这个测试页面用于拦截 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>

于 2013-04-03T23:46:00.880 回答
6

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;
};
于 2017-10-26T11:17:34.170 回答
2

这对我有用。

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

F2 - 113、F3 - 114、F4 - 115 等堡垒。

于 2017-01-13T07:32:20.897 回答
1

捕获 F1-F12 键的问题之一是还必须覆盖默认功能。以下是F1 'Help' 键的实现示例，其覆盖可防止默认帮助弹出窗口。此解决方案可以扩展为 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 文章中借用了一个类似的解决方案来开发这个。让我知道这是否也适用于您。

于 2017-02-22T22:02:19.003 回答
0

您可以使用 Vanilla Javascript和KeyboardEvents keydown或.keypresskeyup

使用 event.key （最好）或 event.code 并将它们与键名进行比较，例如event.key === "F1".

使用功能键时，您可能希望抑制默认行为（在 Windows 上，浏览器使用了许多功能键）。这可以通过调用preventDefault()事件来实现keydown。即使您想监听keyup事件也需要调用preventDefault()该keydown事件，因为浏览器快捷方式已绑定到该事件。请记住，调用preventDefault()也会keydown 抑制按键事件。

document
  .addEventListener("keydown", e => {
    if(e.key === "F1") {
      // Suppress default behaviour 
      // e.g. F1 in Microsoft Edge on Windows usually opens Windows help
      e.preventDefault()
    }
  })

document
  .addEventListener("keyup", e => {
    if(e.key === "F1") {
      // Handle the keyup event
      doSomething()
    }
  })
于 2021-10-12T08:58:35.550 回答
-1

添加快捷方式：

$.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/

于 2015-02-25T20:55:01.737 回答
-1

如果可行，请尝试此解决方案。

window.onkeypress = function(e) {
    if ((e.which || e.keyCode) == 116) {
        alert("fresh");
    }
}
于 2015-06-09T11:20:13.753 回答
-1

我对这个问题的解决方案是：

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

神奇的数字123是键 F12。

于 2018-03-27T12:39:37.990 回答
-1

您可以像这样使用 jquery 执行此操作：

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

        });
于 2018-12-24T11:41:33.453 回答