Out of focus
You know what it’s like: you get a new browser, and you’re trying it out and there is so much that is good about it… then you notice something irritating. It’s a small thing, trivial really, but it is irritating.
There is something like that in IE5. If you click on a link, it puts a box around the link. That box stays there until you click somewhere else. If you have gone to another page and you use the back button, the box is still there. If the link is to another part of the same page, the box is still there.
![[Image: candybox around link]](../images/examples/candyborder.png)
On a PC, the box is a thin black line. On the Mac, though, it’s a thick “candy-coloured” thing, as one irritated designer put it, and very obtrusive — as you can see from the illustration. I don’t know anyone who likes it, and most designers aware of it loathe it.
The trick to getting rid of it is a JavaScript method: blur(). It is easiest to understand blur() by viewing as the opposite of focus().
Using focus() on a window object (assuming there is more than one browser window open, since otherwise it would be silly) brings that window to the front. If instead of applying the focus() method to a window you were to apply blur() the window would be sent to the back of the pile.
In other words, blur() has the precisely same effect on a given window as you would achieve by applying focus() to another window — which, to be honest, would probably be the sensible way of doing it.
This opposition of the two methods is true wherever they can be used. You can use focus() on a text field in a form to select that field; blur() deselects it without selecting another field — that might be useful.
When it comes to the persistent box around the link, you can see what is happening: the user clicks on the link, the box appears and stays there until there is a click elsewhere, that is until the focus has been moved away from the selected link.
So to get rid of the ugly border, all we have to do is apply blur() to the link. This is easy to do using an onClick event in the anchor element like so:
<a href="page.html" onClick="this.blur()">link text</a>
The object this is simply a method of saying “this object here” without going into any specifics of what type of object it is or how it relates to any other objects in the document. The result of this little trick is that the border will still flash up when you click the link, but it will disappear again immediately.
Like everything in web design, though, there is a catch, and its name is Netscape.
Netscape 4 and earlier will give an error when presented with this.blur(). Fortunately, the version 4 browser’s JavaScript errors are less obtrusive than earlier versions’ and the user may be unaware there has been an error. Also, the unsightly border does not appear in Netscape, so there is no need for the function anyway.
The problem arises when you want to use other JavaScript in the anchor element, say to open a pop-up window (please don’t, though). Anything else in the same event value as this.blur() will not work. If the code can be rearranged so that the JavaScript you want can be used and this.blur() kept as the sole value of the onClick event attribute, fine. If not, you may have to discard aesthetics and accept the ugly border.
Addendum: One technique I have seen some people suggest — or, worse, use — is onFocus="this.blur()". This is not a good technique because it interferes with a useful function of the border. Internet Explorer allows users to select links using the keyboard. The TAB key moves from link to link, and ENTER activates the link; the border is useful in this context because it indicates to the user which link will be activated when ENTER is pressed. Using onClick="this.blur()" does not interfere with that, because if you are using the keyboard there is no click. On the other hand, onFocus="this.blur()" does because if you are using the TAB key to find a link you are moving the focus from link to link — so the kludge prevents the user from selecting links with the keyboard.
© DC 2000, 2001. All rights reserved.
