blocks|key|1441138|text|对于这类问题，我最好的来源是这个页面：http://www.quirksmode.org/js/keys.html|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1441139|他们所说的是Safari上的按键代码很奇怪，而在其他地方是一致的(除了IE上没有按键事件，但我相信keydown可以工作)。|1441140|entityMap|0|LINK|mutability|MUTABLE|url|http://www.quirksmode.org/js/keys.html^0|J|12|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

<p>The best source I have for this kind of question is this page: <a href="http://www.quirksmode.org/js/keys.html" rel="noreferrer">http://www.quirksmode.org/js/keys.html</a></p>

<p>What they say is that the key codes are odd on Safari, and consistent everywhere else (except that there's no keypress event on IE, but I believe keydown works).</p>


blocks|key|1441158|text|我同意William的观点，一般来说，劫持功能键不是一个好主意。也就是说，我找到了以一种非常巧妙的方式添加此功能的shortcut库，以及其他键盘快捷键和组合。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1441159|一次击键：|1441160|shortcut.add("F1",+function()+{
++++alert("F1+pressed");
});|code-block|syntax|javascript|1441161|击键组合：|1441162|shortcut.add("Ctrl%2BShift%2BA",+function()+{
++++alert("Ctrl+Shift+A+pressed");
});|1441163|entityMap|0|LINK|mutability|MUTABLE|url|http://www.openjs.com/scripts/events/keyboard_shortcuts/^0|1L|8|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|13|8|@]|9|@]|C|$I|J]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

<p>I agree with William that in general it is a bad idea to hijack the function keys. That said, I found the <a href="http://www.openjs.com/scripts/events/keyboard_shortcuts/" rel="noreferrer">shortcut</a> library that adds this functionality, as well as other keyboard shortcuts and combination, in a very slick way.</p>

<p>Single keystroke:</p>

<pre><code>shortcut.add("F1", function() {
    alert("F1 pressed");
});
</code></pre>

<p>Combination of keystrokes:</p>

<pre><code>shortcut.add("Ctrl+Shift+A", function() {
    alert("Ctrl Shift A pressed");
});
</code></pre>


blocks|key|1655841|text|在没有其他外部类的情况下，您只需使用以下命令即可创建个人黑客代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1655842|event.keyCode|code-block|syntax|javascript|1655843|另一个对所有人的帮助，我认为是这个截取keyCode的测试页面(只需复制并粘贴到新的file.html中以测试您的事件)。|1655844|+<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%2B%2B){t_cel[i].innerHTML='&nbsp;'};">CLEAR</button>
+</body>
+</html>|1655845|这是一个有效的演示，你可以在这里尝试一下：|1655846|​|1655847|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;
}|1655848|td,
th+{
++border:+2px+solid+#aaa;
}|1655849|<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%2B%2B){t_cel[i].innerHTML='&nbsp;'};">CLEAR</button>
</body>

</html>|1655850|1655851|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Z|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|11|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|12|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|D|7|14|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|U|3|N|5|6|7|16|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|W|$]]

<p>Without other external class you can create your personal hack code simply using </p>

<pre><code>event.keyCode
</code></pre>

<p>Another help for all, I think is this test page for intercept the keyCode (simply copy and past in new file.html for testing your event).</p>

<pre><code> &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Untitled&lt;/title&gt;
 &lt;meta http-equiv="content-type" content="text/html; charset=iso-8859-1"&gt;
 &lt;style type="text/css"&gt;
 td,th{border:2px solid #aaa;}
 &lt;/style&gt;
 &lt;script type="text/javascript"&gt;
 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;
 }
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;table id="tblOne"&gt;
 &lt;tr&gt;
 &lt;th style="border:none;"&gt;&lt;/th&gt;&lt;th&gt;onkeydown&lt;/th&gt;&lt;th&gt;onkeyup&lt;/th&gt;&lt;th&gt;onkeypress&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;th&gt;keyCode&lt;/th&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;th&gt;charCode&lt;/th&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
 &lt;button onclick="for(i=0;i&lt;tc_ln;i++){t_cel[i].innerHTML='&amp;nbsp;'};"&gt;CLEAR&lt;/button&gt;
 &lt;/body&gt;
 &lt;/html&gt;
</code></pre>

<p>Here is a working demo so you can try it right here:</p>

<p><div class="snippet" data-lang="js" data-hide="true">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>td,
th {
  border: 2px solid #aaa;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;

&lt;head&gt;
  &lt;title&gt;Untitled&lt;/title&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=iso-8859-1"&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;table id="tblOne"&gt;
    &lt;tr&gt;
      &lt;th style="border:none;"&gt;&lt;/th&gt;
      &lt;th&gt;onkeydown&lt;/th&gt;
      &lt;th&gt;onkeyup&lt;/th&gt;
      &lt;th&gt;onkeypress&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;keyCode&lt;/th&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;charCode&lt;/th&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;button onclick="for(i=0;i&lt;tc_ln;i++){t_cel[i].innerHTML='&amp;nbsp;'};"&gt;CLEAR&lt;/button&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1655868|text|如果有效，请尝试此解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1655869|window.onkeypress+=+function(e)+{
++++if+((e.which+%7C%7C+e.keyCode)+==+116)+{
++++++++alert("fresh");
++++}
}|code-block|syntax|javascript|1655870|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try this solution if works.</p>

<pre><code>window.onkeypress = function(e) {
    if ((e.which || e.keyCode) == 116) {
        alert("fresh");
    }
}
</code></pre>


blocks|key|1655885|text|这很简单。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1655886|$(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+%7C%7C+e.which;

+++++++++//your+keyCode+contains+the+key+code,+F1+to+F12+
+++++++++//is+among+112+and+123.+Just+it.
+++++++++console.log(keyCode);+++++++
++++});
});|code-block|syntax|javascript|1655887|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>It is very simple.</p>
<pre><code>$(function(){
    //Yes! use keydown because some keys are fired only in this trigger,
    //such arrows keys
    $(&quot;body&quot;).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);       
    });
});
</code></pre>


blocks|key|1655904|text|这对我很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1655905|if(code+==112)+{+++++++++alert("F1+was+pressed!!");+++++++++return+false;++++++}|offset|length|style|CODE|1655906|F2+-+113、F3+-+114、F4+-+115等。|1655907|entityMap^0|0|0|28|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

<p>This works for me. </p>

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

<p>F2 - 113, 
F3 - 114, 
F4 - 115,
and so fort.</p>


blocks|key|1655925|text|我对这个问题的解决方案是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1655926|document.onkeypress+=+function+(event)+{
++++event+=+(event+%7C%7C+window.event);
++++if+(event.keyCode+==+123)+{+
+++++++++return+false;
++++}
}|code-block|syntax|javascript|1655927|它有一个神奇的数字123，它是关键的F12。|offset|length|style|CODE|1655928|entityMap^0|0|0|9|3|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>My solution to this problem is:</p>

<pre><code>document.onkeypress = function (event) {
    event = (event || window.event);
    if (event.keyCode == 123) { 
         return false;
    }
}
</code></pre>

<p>With the magic number <code>123</code> which is the key F12.</p>


blocks|key|1441303|text|您可以使用jquery完成此操作，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1441304|++++++++$("#elemenId").keydown(function+(e)+{
++++++++++++if(e.key+==+"F12"){
++++++++++++++++console.log(e.key);
++++++++++++}

++++++++});|code-block|syntax|javascript|1441305|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can do this with jquery like this:</p>

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

        });
</code></pre>


<p>I want to handle F1-F12 keys using JavaScript and jQuery.</p>

<p>I am not sure what pitfalls there are to avoid, and I am not currently able to test implementations in any other browsers than Internet Explorer 8, Google Chrome and Mozilla FireFox 3.</p>

<p>Any suggestions to a full cross-browser solution? Something like a well-tested jQuery library or maybe just vanilla jQuery/JavaScript?</p>


Handling key-press events (F1-F12) using JavaScript and jQuery, cross-browser

jQuery

我想使用JavaScript和jQuery来处理F1-F12键。我不确定有什么陷阱需要避免，而且我目前无法在I 8、Google Chrome和Mozilla FireFox 3以外的其他浏览器上测试实现。对完整的跨浏览器解决方案有什么建议吗？比如一个经过良好测试的jQuery库，或者仅仅是一些普通的jQuery/Ja...

问使用JavaScript和jQuery跨浏览器处理按键事件(F1-F12)
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用JavaScript和jQuery跨浏览器处理按键事件(F1-F12)EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用JavaScript和jQuery跨浏览器处理按键事件(F1-F12)
EN