How do I capture keystrokes on the web? - php

Question

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.

Answer 1

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

Answer 2

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.

Answer 3

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
}
});
});

Answer 4

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