开发者

How do I capture keystrokes on the web?

开发者 https://www.devze.com 2023-02-01 00:15 出处:网络
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.

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.o开发者_运维知识库nkeypress = 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.


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.


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
    }

  });
});


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:

  • Handling Keyboard Shortcuts in JavaScript
  • Detecting keystrokes
0

精彩评论

暂无评论...
验证码 换一张
取 消