cll*_*pse 67 javascript keyboard jquery events keyboard-events
我想使用JavaScript和jQuery处理F1-F12键.
我不确定要避免哪些陷阱,我目前无法在除Internet Explorer 8,Google Chrome和Mozilla FireFox 3之外的任何其他浏览器中测试实现.
对完整的跨浏览器解决方案的任何建议？像一个经过充分测试的jQuery库或者只是vanilla jQuery/JavaScript？
mat*_*sev 43
我同意William的观点,一般来说劫持功能键是个坏主意.也就是说,我找到了一个快捷方式库,它以非常灵活的方式添加了这个功能,以及其他键盘快捷键和组合.
单键击:
shortcut.add("F1", function() {
alert("F1 pressed");
});
击键组合:
shortcut.add("Ctrl+Shift+A", function() {
alert("Ctrl Shift A pressed");
});
Wil*_*del 27
我不确定是否可以截取功能键,但我会避免一起使用功能键.浏览器使用功能键来执行各种任务,其中一些非常常见.例如,在Linux上的Firefox中,至少有六或七个功能键保留供浏览器使用:
最糟糕的是,不同操作系统上的不同浏览器对不同的东西使用不同的密钥.这需要考虑很多差异.你应该坚持使用更安全,不常用的键组合.
mch*_*erm 20
我对这类问题的最佳来源是这个页面:http://www.quirksmode.org/js/keys.html
他们所说的是关键代码在Safari上是奇怪的,并且在其他地方都是一致的(除了在IE上没有按键事件,但我相信keydown工作).
Alo*_*mes 12
哇,这很简单.我应该写这个,为什么以前没有人这么做？
$(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);
});
});
小智 11
没有其他外部类,您只需使用即可创建个人黑客代码
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>
这是一个工作演示,所以你可以在这里试试:
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>针对现代浏览器和 IE11 的ES6 解决方案（转译为 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;
};
| 归档时间： |
|
| 查看次数： |
140685 次 |
| 最近记录： |