Trading Clicks for Keystrokes

There is a saying out there which goes something like ‘Reducing the amount of clicks to do an action is good’. I know that’s a gross paraphrase and I’m sure you could find exceptions to the rule, but generally I prescribe to this idea of reducing clicks. In many cases though there is only so much click reduction you can do. An alternative to think about though when you think you have reached your limit on reducing clicks is to explorer some non-standard browser functionality with hooking into keystroke events.

Providing short cuts to search functionality, help functionality, or maybe an ‘alt+tab’ type functionality to allow the user to shift through the previously visited pages, are all interesting ways to integrate keystroke events into a webapp. In then end most of the integrations of the keystrokes will GREATLY very from application to application. So I’ll show you a quick sample of hooking in with jQuery and then let your mind run free.

Here is an example of listening for a user who hits ‘Ctrl’ and ‘F’ at the same time (or in sequence) using jQuery. I wanted to make sure to provide something to used a two key combination because you probably don’t want a user to accidentally type ‘F’ and cause an action or interface to popup.

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js&#8221; type=”text/javascript”/>
<script>
var wasControlPressed = false;
$(document).ready(function(){
$(window).keydown(function (event) {
if(event.keyCode == 17) {
wasControlPressed = true;
} else {
if(event.keyCode == 70 && wasControlPressed) {
//Allow this path if ctrl was pressed.
alert(‘This sequence was met’);
} else {
//Reset because the sequence wasn’t met.
wasControlPressed = false;
}
}
});
});
</script>

I only tested this in Chrome and Firefox. I presume jQuery will take care of IE as well. Entirely probable that you’ll need to worry about ‘charCode’ there instead of ‘keyCode’ if jQuery doesn’t take care of it for you.  Here is a good site in case you need details on that http://www.quirksmode.org/js/keys.html.

Advertisements

Tags: , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: