我想使用JavaScript和jQuery处理F1-F12键。
我不确定应该避免什么陷阱，并且我目前无法在Internet Explorer 8，Google Chrome和Mozilla FireFox 3之外的任何其他浏览器中测试实现。
对完整的跨浏览器解决方案有什么建议吗？像经过良好测试的jQuery库，还是仅仅是普通的jQuery / JavaScript？
Answers:
对于此类问题，我的最佳来源是以下页面：http : //www.quirksmode.org/js/keys.html
他们说的是，键代码在Safari上是奇怪的，并且在其他所有地方都是一致的（除了IE上没有按键事件，但我相信按键按下是有效的）。
我同意William的观点，一般来说，劫持功能键是一个坏主意。也就是说，我发现了一种快捷方式库，它添加了此功能以及其他键盘快捷键和组合。
一次按键：
shortcut.add("F1", function() {
alert("F1 pressed");
});
击键组合：
shortcut.add("Ctrl+Shift+A", function() {
alert("Ctrl Shift A pressed");
});
我不确定是否可以拦截功能键，但是我会避免同时使用功能键。浏览器使用功能键来执行各种任务，其中一些很常见。例如，在Linux上的Firefox中，至少有六个或七个功能键被保留供浏览器使用：
最糟糕的是，不同操作系统上的不同浏览器对不同事物使用不同的密钥。这需要考虑很多差异。您应该坚持使用更安全，不常用的组合键。
哇，这很简单。我怪写这个，为什么以前没人做呢？
$(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);
});
});
无需其他外部类，您只需使用以下代码即可创建个人hack代码
event.keyCode
对所有人的另一个帮助，我认为这是截取keyCode的测试页面（只需复制并粘贴到new 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> </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>
这是一个有效的演示，因此您可以在这里尝试：
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;
};
this.onX事件，使示例更易于移植？
捕获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文章中借用了类似的解决方案来进行开发。让我知道这是否对您也有用。
如果可行，请尝试此解决方案。
window.onkeypress = function(e) {
if ((e.which || e.keyCode) == 116) {
alert("fresh");
}
}
当您使用angular.js处理事件时，应使用chrome中的ng-keydown阻止功能pause in developer。
添加快捷方式：
$.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();
您可以使用jquery这样执行此操作：
$("#elemenId").keydown(function (e) {
if(e.key == "F12"){
console.log(e.key);
}
});