Bear with me on this, and bear in
mind that these are not the words of an expert, but the vague
mutterings of a fellow traveler on the path to web page
Nirvana.
Stalking the wild focus box
When a text link element receives
focus, either from the keyboard or by the user clicking it, a dotted
box is often drawn around it by the browser. Preventing this
behavior is sometimes desirable for aesthetic reasons, and to this
end several solutions have been offered, such as the following
JavaScript function called whenever a link receives
focus:
function CSRemoveIEbox() {
if ( document.images
&& navigator.userAgent.indexOf( "MSIE" ) != -1 ) {
for ( i = 0; i < document.links.length; i++ ) {
target = eval( "document.links[i]" )
target.onfocus = blurHandler
}
}
}
Obviously, this code works in
Micro$oft Internet Explorer, but does not even attempt to address
the issue in any other browser.
When I began putting this site together, I
had a JavaScript on hand (boxkill.js, cobbled
together December 2002), which I thought would remove those
unsightly little boxes in any browser that supported JavaScript. It
did its job fairly well - or so I thought at the time, even doing so
without resorting to a browser sniffing script - but I soon
discovered when attempting to use it here that if the element
receiving the focus happens to be an image, an exception is raised.
Such are the pit-falls of attempting to generate code without the
foggiest notion of what one is doing.
Fixing that little problem (boxkill2.js) became rather more involved
than I intended, forcing me to plumb the murky depths of the DOM.
The problem, it seems, is with the object method blur(). It is a
simple matter to attach a "blur handler" to every anchor
on a given page when it is loaded, but when that handler is called
at runtime, the object receiving the event is a clicked element
contained by the anchor, not the anchor element itself. The standard
does not define blur() for the IMG element, and thus the
exception.
Hopefully, the script used on these few
pages (boxkill3.js) is a bit more
stable, and portable too, since it was explicitly written to work
with any element capable of receiving focus, and not just an
anchor.
Should anyone discover otherwise, do let me
know.