In Gmail, for example, when one presses Ctrl + B, instead of it getting passed to the browser (which would normally bring up some sort of bookmark manager), it hijacks it for formatting purposes, i.e. turn on bold formatting for the message ur in the middle of oposing. Same for Ctrl+i, Ctrl+u.
How is this done?
In Gmail, for example, when one presses Ctrl + B, instead of it getting passed to the browser (which would normally bring up some sort of bookmark manager), it hijacks it for formatting purposes, i.e. turn on bold formatting for the message ur in the middle of oposing. Same for Ctrl+i, Ctrl+u.
How is this done?
Share Improve this question edited Sep 10, 2011 at 11:49 outis 77.5k23 gold badges153 silver badges226 bronze badges asked May 23, 2009 at 20:20 asdfasdfasdfasdfasdfasdf 5- 2 My answer would be PLEASE DON'T DO THIS... but I doubt that's what you're looking for. – Instance Hunter Commented May 23, 2009 at 21:09
- Yeah, its not :) Actually, what i'm planning on doing probably isn't as bad as you thought: i was going to use it for a greasemonkey script locally. – asdfasdfasdf Commented May 23, 2009 at 22:41
- 1 Can anyone please revert version 1? – dmeister Commented Jun 14, 2009 at 21:08
- What's the deal with the cat-like typing? – Nosredna Commented Jun 14, 2009 at 21:20
- What the HELL happened to this question in the past few days? – hbw Commented Jun 16, 2009 at 8:14
3 Answers
Reset to default 9You would attach an onkeydown or onkeyup event handler to the global document object. For example, if I wanted to make the title bar change to "asdf" each time Ctrl-M was pressed, I would register the event handler through window.onload, like this:
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 mand
}
};
};
W3Schools has more information on using these events: onkeydown and onkeyup.
Also, I think I should note that there are some discrepancies across browsers in regards to the event properties (like, for example, in Firefox, you're supposed to access the keycode through event.which, while in IE it's event.keyCode, although Firefox may support event.keycode—confusing, isn't it?). Due to that, I'd remend doing this stuff through a JavaScript framework, such as Prototype or jQuery, as they take care of all the icky patibility stuff for you.
Here is the source for an HTML page that uses jQuery and does what htw's solution does.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3/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 somebody!
Use the onkeydown or onkeyup event to fire a 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 that you can see what properties an event object has.