我想使用 JavaScript 和 jQuery 处理 F1-F12 键。
我不确定要避免哪些陷阱，而且我目前无法在 Internet Explorer 8、Google Chrome 和 Mozilla FireFox 3 之外的任何其他浏览器中测试实现。
对完整的跨浏览器解决方案有什么建议吗？像经过良好测试的 jQuery 库或者只是普通的 jQuery/JavaScript 之类的东西？
使用 JavaScript 和 jQuery，跨浏览器处理按键事件（F1-F12）
IT技术
javascript
jquery
events
keyboard
keyboard-events
2021-02-05 08:05:44
6个回答
我同意威廉的看法，一般来说劫持功能键是个坏主意。也就是说，我找到了以非常巧妙的方式添加此功能以及其他键盘快捷键和组合的快捷方式库。
单键：
shortcut.add("F1", function() {
alert("F1 pressed");
});
按键组合：
shortcut.add("Ctrl+Shift+A", function() {
alert("Ctrl Shift A pressed");
});
我不确定是否可以拦截功能键，但我会避免同时使用功能键。浏览器使用功能键来执行各种任务，其中一些非常常见。例如，在 Linux 上的 Firefox 中，至少有六个或七个功能键是为浏览器保留的：
- F1（帮助），
- F3（搜索），
- F5（刷新），
- F6（焦点地址栏），
- F7（插入符号浏览模式），
- F11（全屏模式），和
- F12（由多个附加组件使用，包括 Firebug）
最糟糕的是，不同操作系统上的不同浏览器对不同的东西使用不同的密钥。这需要解释很多差异。您应该坚持使用更安全、不太常用的组合键。
我对此类问题的最佳来源是此页面：http : //www.quirksmode.org/js/keys.html
他们说的是 Safari 上的按键代码很奇怪，其他地方都是一致的（除了 IE 上没有按键事件，但我相信按键可以工作）。
这很简单。
$(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);
});
});
无需其他外部类，您只需使用即可创建您的个人黑客代码
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> </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>
这是一个有效的演示，因此您可以在此处尝试：
其它你可能感兴趣的问题