Creating keyboard shortcuts
Keyboard navigation is common in window-based applications. This is very handy for those who prefer keyboard controls over mouse controls. Keyboard shortcuts can also be created in web applications but they are difficult to implement due to inconsistency among browsers.
We will create a simple example in this recipe that will give you the basic understanding of implementing shortcut keys. You will be able to create your own shortcut keys for use in your web applications.
Getting ready
Get the jQuery library to use with this recipe.
How to do it...
Create a new file named
keyboard.htmland save it in thechapter1directory.In the body of HTML create two DIV elements and in the
<head>section write some CSS to apply styles to these DIV elements.<html> <head> <title>Keyboard Shortcuts</title> <style type="text/css"> div{ border : 1px solid black;float:left;height:200px; margin:10px; width:220px;} </style> </head> <body> <div>You can toggle this div using Alt+S</div> <div>You can toggle this div using Alt+G </div> <p style="clear:both;"> </p> <p>Press Alt+B to toggle both divs</p> </body> </html>Write the jQuery code that will create keyboard shortcuts to toggle these DIV elements. The
keydownevent handler will be used to implement this behaviour. It will check for the keys that are pressed and then take actions accordingly. Three shortcuts will be created. Pressing Alt + S will toggle the first DIV. Alt + G will toggle the second DIV. Pressing Alt + B will toggle both the DIV elements together.Another handler
keyupwill be used to reset the required variables.<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function () { //remember that this is a global variable var altPressed = false; $(document).keydown(function (event) { if(event.which == 18) altPressed = true; if(altPressed) { switch(event.which) { case 83: $('div:first').slideToggle('slow'); return false; break; case 71: $('div:last').slideToggle('slow'); return false; break; case 66: $('div').slideToggle('slow'); return false; break; } } }); $(document).keyup(function (event) { if(event.which == 18) altPressed = false; }); }); </script>Open your browser and run the
keyboard.htmlfile. Try pressing the shortcuts that we have just created. You will see that the DIV elements will toggle with a slide effect.
How it works...
In order to be able to create shortcut keys, first we need to find out which key was pressed. Different browsers have their own methods of determining the value of the pressed key. jQuery normalizes the way this information can be retrieved across browsers. An event object is available to handler functions. This event object has a property which that gives the code of the pressed key. Alt key has the value 18.
The keyboard shortcuts in this recipe use the combination of Alt and the other keys. We begin by declaring a global variable altPressed with the value set to false. Then there are two events attached to the page. keydown will execute when a key is in a pressed state and keyup when a key is released. Whenever Alt is pressed the keydown event will set its value to true. When released, it will be reset to false again by the keyup handler function.
Next comes the if statement, which will evaluate to a true value if the Alt key is pressed. If Alt is pressed and another key is pressed along with it, the switch case will check the key's value and will execute the corresponding switch case.
The value for the S key is 83. So, pressing S along with Alt will select the first DIV and will apply the slideToggle effect to it. Similarly, Alt + G will toggle the second DIV and Alt + B will toggle both DIVs.
Note
Note the return of false in each case of switch statement. Returning false is necessary to override a browser's default behavior. If false is not returned, pressing the Alt key will activate the browser's menu.
There's more...
List of common key codes
A list of key codes can be found at http://goo.gl/v2Fk
See also
Binding and unbinding elements in this chapter explains how to attach events to elements.
