This tutorial will show you how to get the pressed key in the browser window, whether it's Ctrl, Alt, Shift, Page Up, Arrow Up or any other key. There's both an Internet Explorer and a Firefox way of doing this.
There are several reasons why you may want to capture the key press event in a browser window. Perhaps you’re making a JavaScript game, or a map similar to Google Maps and you want to allow navigation through the arrow keys. Getting the pressed key is easy in JavaScript, however different browsers use different ways for this. We will first see how this can be done using Internet Explorer, and then how we can make it work on both Internet Explorer and Firefox.
The Internet Explorer way
Thanks to onkeyup we can easily handle the key pressing event in Internet Explorer. Here is the script we need to capture some of the keys on the keyboard:
<script type="text/javascript">
document.onkeyup = KeyCheck;
function KeyCheck()
{
var KeyID = event.keyCode;
switch(KeyID)
{
case 16:
document.Form1.KeyName.value = "Shift";
break;
case 17:
document.Form1.KeyName.value = "Ctrl";
break;
case 18:
document.Form1.KeyName.value = "Alt";
break;
case 19:
document.Form1.KeyName.value = "Pause";
break;
case 37:
document.Form1.KeyName.value = "Arrow Left";
break;
case 38:
document.Form1.KeyName.value = "Arrow Up";
break;
case 39:
document.Form1.KeyName.value = "Arrow Right";
break;
case 40:
document.Form1.KeyName.value = "Arrow Down";
break;
}
}
</script>And the HTML to use with this is:
<form name="Form1">
<input type="text" name="KeyName" value="" />
</form>We get the char code of the pressed key and we display its equivalent inside the TextBox. Note that when pressing the Alt key, the page loses focus and other elements on the browser window gain focus, and thus it might not always be catched as an event. Also, inside the JavaScript we catch only a small number of the keys on the keyboard, but that doesn’t mean the rest of the keys can’t be catched using the event. There is a list of the char codes and their equivalent key on the keyboard, so that you can catch the key you want.
Making it work in both Internet Explorer and Firefox
To make it work in both Internet and Firefox, we’re going to use the same function – KeyCheck() – but with an argument this time (e). Also, we use an inline condition so that the appropriate method is used depending on the browser:
<script type="text/javascript">
document.onkeyup = KeyCheck;
function KeyCheck(e)
{
var KeyID = (window.event) ? event.keyCode : e.keyCode;
switch(KeyID)
{
case 16:
document.Form1.KeyName.value = "Shift";
break;
case 17:
document.Form1.KeyName.value = "Ctrl";
break;
case 18:
document.Form1.KeyName.value = "Alt";
break;
case 19:
document.Form1.KeyName.value = "Pause";
break;
case 37:
document.Form1.KeyName.value = "Arrow Left";
break;
case 38:
document.Form1.KeyName.value = "Arrow Up";
break;
case 39:
document.Form1.KeyName.value = "Arrow Right";
break;
case 40:
document.Form1.KeyName.value = "Arrow Down";
break;
}
}
</script>
