使用JavaScript和jQuery处理按键事件（F1-F12），跨浏览器
我想要使用JavaScript和jQuery处理F1-F12键。
我不确定要避免哪些缺陷，目前我还无法在Internet Explorer 8，Google Chrome和Mozilla FireFox 3等其他浏览器上testing实现。
任何build议到一个完整的跨浏览器解决scheme？ 就像一个经过充分testing的jQuery库或者只是香草jQuery / JavaScript？
我对这种问题的最好的来源是这个页面： http : //www.quirksmode.org/js/keys.html
他们说的是，在Safari上的关键代码是奇怪的，并在其他地方一致（除了IE上没有按键事件，但我相信keydown的作品）。
我同意威廉的观点，一般来说劫持function键是一个坏主意。 也就是说，我发现了一个快捷方式库，它以非常stream畅的方式增加了这个function，以及其他键盘快捷键和组合。
单键击：
shortcut.add("F1", function() { alert("F1 pressed"); }); 击键组合：
shortcut.add("Ctrl+Shift+A", function() { alert("Ctrl Shift A pressed"); });
我不确定是否可以拦截function键，但我会避免使用function键。 function键被浏览器用来执行各种任务，其中一些非常普遍。 例如，在Linux上的Firefox中，至less有六个或七个function键被保留供浏览器使用：
- F1（帮助），
- F3（search），
- F5（刷新），
- F6（焦点地址栏），
- F7（脱字符浏览模式），
- F11（全屏模式）和
- F12（由几个附加组件使用，包括Firebug）
最糟糕的是，不同操作系统上的不同浏览器对不同的东西使用不同的密钥。 这是很多的差异来解释。 你应该坚持更安全，不太常用的组合键。
没有其他外部类，您可以简单地使用创build您的个人黑客代码
event.keyCode
对于所有的帮助，我想这是testing页面截取keyCode（只需复制和过去在新的file.htmltesting你的事件）。
<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> </td><td> </td><td> </td> </tr> <tr> <th>charCode</th><td> </td><td> </td><td> </td> </tr> </table> <button onclick="for(i=0;i<tc_ln;i++){t_cel[i].innerHTML=' '};">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> </td> <td> </td> <td> </td> </tr> <tr> <th>charCode</th> <td> </td> <td> </td> <td> </td> </tr> </table> <button onclick="for(i=0;i<tc_ln;i++){t_cel[i].innerHTML=' '};">CLEAR</button> </body> </html>
哇，这很简单。 我被责怪写这个，为什么没有人之前呢？
$(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); }); });
添加快捷方式：
$.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();
试试这个解决scheme。
window.onkeypress = function(e) { if ((e.which || e.keyCode) == 116) { alert("fresh"); } }
当你使用angular.js来处理事件时，你应该使用ng-keydown来防止在chrome pause in developer 。
这对我有用。
if(code ==112) { alert("F1 was pressed!!"); return false; }
F2 – 113，F3 – 114，F4 – 115等堡垒。
捕获F1-F12键的问题之一是， 默认function也必须被覆盖 。 下面是一个F1'帮助'键的实现示例，使用覆盖防止默认帮助popup。 这个解决scheme可以扩展为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文章中借用了一个类似的解决scheme来开发这个。 让我知道这是否也适用于你。
现代浏览器和IE11的 ES6解决scheme（转换到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; };
