您的位置: 首页  >  技术问答  >  如何捕获网络上的击键？

如何捕获网络上的击键？

分类: 技术问答 • 2022-03-14 20:25:37

如何捕获网络上的击键？

问题描述：

Using PHP, JS, or HTML (or something similar) how would I capture keystokes? Such as if the user presses ctrl+f or maybe even just f, a certain function will happen.

++++++++++++++++++++++++EDIT+++++++++++++++++++ Ok, so is this correct, because I can't get it to work. And I apologize for my n00bness is this is an easy question, new to jQuery and still learning more and more about 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>

++++++++++++++++EDIT++++++++++++++++++

Here is everything, but I can't get it to work:

<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>

+++EDIT+++

Thanks to Jacob, I had thought that I had it fixed, but when I tried it in FF and IE (currently using chrome, which did work) it did not work. This script is just going to be for a personal page that only I will see, so it is not the biggest deal, but for future reference, I would just like to know why this is not working in either IE or FF.

使用PHP，JS或HTML（或类似的东西）我如何捕获keystokes？ 例如，如果用户按下ctrl + f或者甚至只是f，则会发生某种功能。 p>

+++++++++++++++++++++++++++ ++++++ EDIT +++++++++++++++++++++++ + + + + 我为我的n00bness道歉这是一个简单的问题，是jQuery的新手，还在学习越来越多关于JS的知识。 p> 

 ＆lt; script＆gt;  
var element = document.getElementById（'capture'）; 
 element.onkeypress = function（e）{
 var ev = e ||  event; 
 if（ev.keyCode == 70）{
 alert（“hello”）; 
} 
} 
＆lt; / script＆gt; 
＆lt; div id =“capture”＆gt; 
Hello，Testing  123 
＆LT; / DIV＆GT; 
 代码>  PRE> 
 
 
 ++++++++++++++++ EDIT ++++++++++++++++++  p> 
 
 这是一切，但我无法让它工作： p> 
 
 


 ＆lt; link rel =“icon”href =“favicon.ico”type =“image /  x-icon“＆gt; 
＆lt; style＆gt; 
 * {
margin：0px 
} 
 
div {
 height：250px; 
 width：630px; 
 overflow：hidden; 
 vertical-align  ：top; 
 position：relative; 
 background-color：＃999; 
} 
 iframe {
 position：absolute; 
 left：-50px; 
 top：-130px; 
} 
＆lt  ; / style＆gt; 
＆lt; script＆gt; 
document.getElementsByTagName（'body'）[0] .onkeyup = function（e）{
 var ev = e ||  event; 
 if（ev.keyCode == 70＆amp;＆amp; ev.ctrlKey）{// control + f 
 alert（“hello”）; 
} 
} 
＆lt; / script＆gt; 
＆lt;  div id =“capture”＆gt; 
Hello，Testing 123＆lt;！ - ＆lt; iframe src =“http://www.pandora.com/”scrolling =“no”width =“1000”height =“515”frameborder  = “0” ＆GT;＆LT; / iframe中＆GT;  - ＆GT; 
＆LT; / DIV＆GT; 
 代码>  PRE> 
 
 
 +++ EDIT +++  p> 
 
  


感谢雅各布，我原以为我已经修好了，但是当我在FF和IE中尝试它（目前使用的是chrome，它确实有效）时它没有用。 这个脚本只是用于我将看到的个人页面，所以这不是最大的交易，但为了将来参考，我只想知道为什么这在IE或FF中都不起作用。 p  > 
  div>

答

Sure, the only way to do this would be through JavaScript, and you'd do so like this:

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

To find out the specific key code you want, see this article: http://www.webonweboff.com/tips/js/event_key_codes.aspx

jsFiddle example

答

You're looking for the javascript events associated with key presses. There are some annoying browser incompatibilities here, so you'll be best off using a JS library like jQuery, where you can use the jQuery keypress() method, but you can get the data you want from the javascript onkeypress event.

答

Using jQuery:

You can do it using jQuery Keydown

Nice article on capturing different key events:

Working with Events in jQuery

EDIT:

JavaScript

Here are nice articles to do this in javascript with nice DEMO:

答

You are better off capturing all keys on the window rather than capturing key strokes on a specific element like other answers referred to.

so using native javascript:

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

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

using JQuery:

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

  });
});

相关推荐