如何捕捉网络上的击键？答案

【问题标题】：How do I capture keystrokes on the web?如何捕捉网络上的击键？
【发布时间】：2011-05-30 18:52:30
【问题描述】：

使用 PHP、JS 或 HTML（或类似的东西）我将如何捕获按键？比如如果用户按下 ctrl+f 或者甚至只是 f，就会发生某个功能。

++++++++++++++++++++++++++编辑+++++++++++++++++++++ 好的，这是正确的，因为我无法让它工作。我为我的 n00bness 道歉，这是一个简单的问题，对 jQuery 来说是新手，并且仍在学习越来越多的关于 JS 的知识。

<script>    
var element = document.getElementById('capture');
    element.onkeypress = function(e) { 
       var ev = e || event;
       if(ev.keyCode == 70) {
          alert("hello");
       }
    }
</script>
<div id="capture">
Hello, Testing 123
</div>

++++++++++++++++++编辑++++++++++++++++++++

一切都在这里，但我无法让它工作：

<link rel="icon" href="favicon.ico" type="image/x-icon">
<style>
* {
margin: 0px
}  

div {
    height: 250px;
    width: 630px;
    overflow: hidden;
    vertical-align: top;
    position: relative;
    background-color: #999;
}
  iframe {
    position: absolute;
    left: -50px;
    top: -130px;
  }
</style>
<script>
document.getElementsByTagName('body')[0].onkeyup = function(e) { 
   var ev = e || event;
   if(ev.keyCode == 70 && ev.ctrlKey) { //control+f
      alert("hello");
   }
}
</script>
<div id="capture">
Hello, Testing 123<!--<iframe src="http://www.pandora.com/" scrolling="no" width="1000" height="515"frameborder="0"></iframe>-->
</div>

+++编辑+++

感谢 Jacob，我原以为我已经修复了它，但是当我在 FF 和 IE 中尝试它时（目前使用 chrome，它确实有效）它不起作用。这个脚本只是用于个人页面，只有我会看到，所以它不是最重要的，但为了将来参考，我想知道为什么它在 IE 或 FF 中都不起作用。

【问题讨论】：

标签： php javascript function input keystroke

【解决方案1】：

当然，做到这一点的唯一方法是通过 JavaScript，你可以这样做：

window.onload = function() {
   document.getElementsByTagName('body')[0].onkeyup = function(e) { 
      var ev = e || event;
      if(ev.keyCode == 70) {//&& ev.ctrlKey) {
         //do something...
      }
   }
};

要找出你想要的具体键码，请看这篇文章：http://www.webonweboff.com/tips/js/event_key_codes.aspx

jsFiddle example

【讨论】：

你能在 JS Fiddle 上测试它吗？当我在您提供的链接中按 Ctr+F 时，它会打开浏览器搜索选项。
刚刚尝试替换“do_something();”使用“alert('hello')”，当我按 ctrl+f 时没有任何反应。我尝试擦除 && ev.ctrlKey，然后按 f 仍然没有运气。
@NAVEED 你需要关注右下角的<iframe>。
@Sean 你用的是什么浏览器？
顺便说一句，我想我宁愿它只是 f，因为当时我没有考虑它，但是是的，ctrl+f 打开搜索。

【解决方案2】：

您正在寻找与按键相关的 javascript 事件。这里有一些令人讨厌的浏览器不兼容问题，所以你最好使用像 jQuery 这样的 JS 库，在那里你可以使用 jQuery keypress() 方法，但你可以从 javascript onkeypress 事件中获取你想要的数据。

【讨论】：

啊...好吧，正如我所说，我这样做是为了个人而非公开，所以浏览器兼容性并不重要。

【解决方案3】：

使用 jQuery：

你可以使用jQuery Keydown来做到这一点

关于捕捉不同关键事件的好文章：

Working with Events in jQuery

编辑：

JavaScript

这里有一些不错的文章，可以用漂亮的 DEMO 在 javascript 中做到这一点：

【讨论】：

@NAVEEED OP 没有使用 jQuery。
@Jacob Relkin：嗯。好的，但我认为 OP 不了解 jQuery。因此建议使用 jQuery 轻松完成此操作。
jQuery 在这种情况下是不必要的。 DOM 很好地处理键盘事件，并且现代浏览器支持很好。其实大部分东西根本不需要jQuery。
我完全同意@Delan

【解决方案4】：

您最好捕获窗口上的所有键，而不是像引用的其他答案那样捕获特定元素上的击键。

所以使用原生 javascript：

window.onload = function (){
 eventHandler = function (e){
    if (e.keyCode == 70 && e.ctrlKey)
    {
      //do stuff
      //console.log(e);
    }
  }

  window.addEventListener('keydown', eventHandler, false);
}

使用 JQuery：

$(document).ready(function(){
  $(window).keydown(function (e) {
    if (e.keyCode == 70 && e.ctrlKey)
    {
        //do stuff
    }

  });
});

【讨论】：