Entry
How can I associate a key with a certain action?
How can I assciate an accesskey with a form element?
How can I associate an accesskey with a link?
Sep 3rd, 2002 19:32
Derek Gabriel, Martin Honnen, Update FYI
HTML 4 defines the ACCESSKEY attribute for the A, AREA, BUTTON, INPUT,
LABEL, LEGEND, and TEXTAREA elements.
So with a compliant browser (IE4+ only at the moment, NN6 [6.2.2 for
certain]) <A HREF="http://JavaScript.FAQTs.com"
ACCESSKEY="J">JavaScript.FAQTs.com</A> associates the key J with the
link. On windows pressing ALT-J will focus on the link. Then pressing
enter will activate the link. A button can be activated simply by
pressing ALT-accesskey
<INPUT TYPE="button" NAME="aButton"
VALUE="button activate with B"
ACCESSKEY="B"
ONCLICK="alert('Kibology')"
>
NN4 doesn't support the ACCESSKEY attribute so here you have to use key
event handling to associate an action with a key.
The following is an example which uses accesskeys for IE4+ (and other
browsers which support it) and key event handling for NN4:
<HTML>
<HEAD>
<SCRIPT>
if (document.layers) {
document.onkeydown = function (evt) {
var key = String.fromCharCode(evt.which).toLowerCase();
switch (key) {
case "j":
location.href = document.links[0].href;
break;
case "u":
document.formName.user.focus();
break;
case "e":
document.formName.email.focus();
break;
case "b":
document.formName.aButton.click();
}
return true;
};
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="http://JavaScript.FAQTs.com" ACCESSKEY="J">
JavaScript.FAQTs.com
</A>
<FORM NAME="formName">
<LABEL for="fuser" accesskey="U">
<U>U</U>ser Name
</LABEL>
<INPUT type="text" name="user" id="fuser">
<LABEL for="fmail" accesskey="E">
<U>E</U>mail</LABEL>
<INPUT type="text" name="email" id="fmail">
<BR>
<INPUT TYPE="button" NAME="aButton"
VALUE="button activate with B"
ACCESSKEY="B"
ONCLICK="alert('Kibology')"
>
</FORM>
</BODY>
</HTML>
UPDATE 09/03/2002:
FYI: This is perfectly implemented in IE 6 and NN 6 (I'm using 6.2.2).
The only differences is that in netscape, it'll automatcialy browse to
the link when you hit the key combo. In IE, it just "selects" the link,
shows up in the status bar, you have to hit enter to activate it.
<HTML>
<HEAD>
</HEAD>
<BODY>
<A HREF="http://JavaScript.FAQTs.com" ACCESSKEY="J">
JavaScript.FAQTs.com
</A>
<FORM NAME="formName">
<LABEL for="fuser" accesskey="U">
<U>U</U>ser Name
</LABEL>
<INPUT type="text" name="user" id="fuser">
<LABEL for="fmail" accesskey="E">
<U>E</U>mail</LABEL>
<INPUT type="text" name="email" id="fmail">
<BR>
<INPUT TYPE="button" NAME="aButton"
VALUE="button activate with B"
ACCESSKEY="B"
ONCLICK="alert('Kibology')"
>
</FORM>
</BODY>
</HTML>
