Get key press event using JavaScript

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>

See this code in action

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>


See this code in action

Nathan Pakovskie is an esteemed senior developer and educator in the tech community, best known for his contributions to Geekpedia.com. With a passion for coding and a knack for simplifying complex tech concepts, Nathan has authored several popular tutorials on C# programming, ranging from basic operations to advanced coding techniques. His articles, often characterized by clarity and precision, serve as invaluable resources for both novice and experienced programmers. Beyond his technical expertise, Nathan is an advocate for continuous learning and enjoys exploring emerging technologies in AI and software development. When he’s not coding or writing, Nathan engages in mentoring upcoming developers, emphasizing the importance of both technical skills and creative problem-solving in the ever-evolving world of technology. Specialties: C# Programming, Technical Writing, Software Development, AI Technologies, Educational Outreach

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top