How do I capture key combos in javascript?
In Gmail, for example, when pressing Ctrl+ Binstead of getting it in the browser (which usually invokes some kind of bookmark manager), it grabs it for formatting, i.e. on bold formatting for ur message in the middle of comoposing. The same goes for Ctrl+ i, Ctrl+ u.
How it's done?
You will attach an event handler onkeydown
or onkeyup
to a global object document
. For example, if I wanted to change the title bar to "asdf" every time Ctrl-M was pressed, I would register an event handler via window.onload
, for example:
window.onload = function()
{
document.onkeydown = function(event)
{
var keyCode;
if (window.event) // IE/Safari/Chrome/Firefox(?)
{
keyCode = event.keyCode;
}
else if (event.which) // Netscape/Firefox/Opera
{
keyCode = event.which;
}
var keyChar = String.fromCharCode(keyCode).toLowerCase();
if (keyChar == "m" && event.ctrlKey)
{
document.title = "asdf";
return false; // To prevent normal minimizing command
}
};
};
W3Schools has more information on using these events: onkeydown
and onkeyup
.
Also, I think I should note that there are some differences between browsers regarding event properties (for example, in Firefox, you have to access the key code via event.which
, and in IE it event.keyCode
, although Firefox may support event.keyCode
-confusing, not so right?). Because of this, I would recommend doing this through a JavaScript framework like Prototype or jQuery , since they take care of whatever you don't like.
a source to share
Here is the source of the HTML page using jQuery and does what the htw solution does.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hijack Example</title>
<script type="text/javascript" src="../scripts/jquery-1.2.1.js">
</script>
<script type="text/javascript">
$(function(){
document.title = "before keypress detected";
$(document).keydown(function(event) {
// alert('stuff happened: ' + msg + " " + event.keyCode);
var keyChar = String.fromCharCode(event.keyCode).toLowerCase();
if (keyChar == "m" && event.ctrlKey) {
document.title = "ctrl-m pressed!";
}
});
});
</script>
</head>
<body id="body">
<p>Change the path to jquery above as needed (search for ../scripts/jquery-1.2.1.js)</p>
<p>Watch the title bar, then press control-M, then watch the title bar again!</p>
</body>
</html>
Hope this helps someone!
a source to share
Use event onkeydown
or onkeyup
to trigger the handler function:
var body = document.getElementsByTagName("body")[0];
body.onkeydown = function(event) {
var str = "";
for (var prop in event) {
str += prop + ": " + event[prop] + "<br>";
}
body.innerHTML = str;
};
With this, you can see what properties the event object has.
a source to share