0 
0 Some time ago I wrote a post on HTML Buttons which are accessable using keyboard shortcuts. (alt-s for a save button for example). In the solution I proposed I used CSS to put background images on the buttons.
One of the commenters noted that this approach gets quite tedious when you have a lot of buttons or an internationalized application.
In this post I describe how you could use CSS and a custom Tag to implement a more elegant solution.
The first important step is not to use an HTML button or input, but a link which you style to look like a button. This is what the HTML should look like.
<a onfocus='this.click();'
href='javascript:document.forms[ 0 ].submit();'
class='up' accesskey = 's' onclick='return allowSubmit();'>
<span class='accessKey'> S</span>ave
</a>
The stylesheet should have classes for the syle of the link (up) and the layout of the Accesskey (accesskey )
for example
.up {
background:silver;
color:black;
border-top:2px solid white;
border-left:2px solid white;
border-bottom:2px solid black;
border-right:2px solid black;
padding:8px;
text-decoration:none;
}
.accessKey {
text-decoration:underline;
color:red;
font-variant:small-caps;
}
Note the following: Internet Explorer only puts the focus on the link when the accesskey is used. Firefox correctly executes the link. For IE I had to put the onfocus=”this.click();”. Another thing to take in account is that when a form is submitted using Javascript the onSubmit event is not fired.
To use this approach in a struts application I created a custom tag. This tag reads the text for the link (in this case :save) from a ResourceBundle using a key.
In the English ResourceBundle I specify the text and the key to be used as AccessKey in the following manner
submitbutton=#S#ave
Likewise in the Dutch ResourceBundle I add
submitbutton=Opslaa#n#
The tag renders the correct HTML based on the retrieved text. In an English browser the “button” is accessible using alt-s, in a Dutch browser with alt-n.
Browser with English language settings
Browser with Dutch language settings
The Tag exposes several usefull attributes as can be seen in the following code snippet
<amis :accessbutton onSubmitHandler="allowSubmit()" tabindex="2" key="submitbutton" upClassName="up" accessKeyClassName="accesskey" />
The onSubmitHandler attribute points to a javascript method on the page. Only if this function returns true the form is submitted. Note that the actual layout is determined by a StyleSheet and not the Tag. Any changes to the layout can be made quite easily.
The accesskey does not have be the first letter, it can be any letter you want .
The Tag itself is pretty straightforward. It uses the Struts framework to obatin resources and write its output. Here are some snippets
Obtaining the text from the resource bundle
e = RequestUtils.message(pageContext, this.bundle,Globals.LOCALE_KEY,key,null);
Getting the accesskey and Hihlighting it using commons StringUtils
accessKey = StringUtils.getNestedString(message,SEPARATOR,SEPARATOR);
message = StringUtils.replaceOnce(message,SEPARATOR,"<span class='" + accessKeyClassName + "'>");
message = StringUtils.replaceOnce(message,SEPARATOR,"</span'>");
It is easy. Also take a look at the Struts taglibraries for inspiration!
There is one bug remaing …. The link is followed every time it receives the focus. So tabbing also submits the form. I’ll have to correct that behaviour.
Damn!, would I have liked this solution described in more detail.
I’m looking for the exact same thing.
Well, I’ll try mailing you Leon
*J*
Simply use the accessKey property on HTML DOM Button object
I made a button with js,but i don’t know how i can insert an accesskey? will you help me? thanks