outpost 418

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.

 
<  code >
verbage
downloads
about
 
< Back to the top >