logo

Buttons with Keyboard Shortcut

If you buy in to the idea that, one day, all "work" will be carried out via the browser then you will probably want your applications to function as much like their non-browser equivalents as possible. This should, in turn, make them more user friendly.

One feature that is common to most native OS apps is the keybord shortcut. Consider the dialog box shown below:

Image

There are numerous ways of selecting either of the two buttons that I won't bother going in to. One way is to use the Alt+Y or Alt+N key combinations, denoted by the underlined letter on each button.

How could we do something like this in the browser. Using the <button> object, that's how. This was introduced in Internet Explorer 4 as a way to give more options to the developer when creating applications. Here is an example of how you can use it in a similar fashion to the dialog box above. Try clicking on it and then pressing Alt+X :



How do we do this. Simple. We use the "AccessKey" attribute of the button. The only thing to remember is not to use those letters reserved for the conventional browser menus (F, E, V, A, T, H & D). Here is the code behind the button:

<button onclick="alert('You have pressed the button');" accesskey="x" id="btnExample">E<u>x</u>ample</button>

The beauty of these button objects is that you can put almost anything in them. We can then use the <u> tag to underline the letter x and let the user know this is the shortcut key. Cool hey? You can even put images in them like this (I've played with the CSS too):



The code for this button is:

<button onclick="alert('You are currently at:\n' + window.location);" accesskey="w" id="btnWebAddress" style="border : 1px solid Gray; border-right: 2px solid Gray; border-bottom: 2px solid Gray; background-color : #F0F8FF;"><img src="/icons/vwicn070.gif"> <u>W</u>eb Address</button>


Feedback

  1. help me

    hello there i want to know the shortcut of keyboard and pls send me by me email address. with best regards thank u

  2. Not cross-platform

    I'm using FF on Kububtu and the example doesn't work. I do find the trick very neat, but seriously doubt many people use shortcuts in general. When I use the keyboard it's generally tab & return.

      • avatar
      • Nic
      • Fri 13 Apr 2007

      Re: Not cross-platform

      Sure it works. With Firefox (on Ubuntu at least), you have to hold down the shift key as well. Try shift-alt-x.

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:



Navigate other articles in the category "Forms"

« Previous Article Next Article »
Marking fields as required   Control how attachments are removed

About This Article

Author: Jake Howlett
Category: Forms
Keywords: button; shortcut; keyboard; access key;

Options

Feedback
Print Friendly

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »