faqts : Computers : Programming : Languages : JavaScript : Links

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

49 of 59 people (83%) answered Yes
Recently 6 of 10 people (60%) answered Yes

Entry

How do I get rid off the dashed focus border IE (and NN6) draw around clicked links?

Dec 13th, 2002 12:27
Klaus Bolwin, Martin Honnen, Andreas Reuterberg,


It seems that calling
  <ONCLICK="this.blur()
removes the focus and thereby the border. Some people swear on not just 
blurring from the link but setting focus somewhere else but I found the 
above to be reliable. Anyway here are some links to test with
<HTML>
<HEAD>
</HEAD>
<BODY>
<A HREF="#" 
   ONCLICK="alert('link action'); if (document.all || 
document.getElementById) this.blur(); return false;"
>
link1
</a>
<BR>
<A HREF="#" 
   ONCLICK="alert('link action'); if (document.all || 
document.getElementById) this.blur(); return false;"
><IMG SRC="http://www.faqts.com/symphony/local/brands/faqts/javascript-
faqts.gif" BORDER="0"></a>
<BR>
<A HREF="javascript: void 0" 
   ONCLICK="alert('link action'); if (document.all || 
document.getElementById) this.blur(); return false;"
>
link1
</a>
<BR>
<A HREF="javascript: void 0" 
   ONCLICK="alert('link action'); if (document.all || 
document.getElementById) this.blur(); return false;"
><IMG SRC="http://www.faqts.com/symphony/local/brands/faqts/javascript-
faqts.gif" BORDER="0"></a>
<BR>
<A HREF="http://javascript.faqts.com" TARGET="_blank"
   ONCLICK="if (document.all || document.getElementById) this.blur(); 
return true;"
>
link1
</a>
<BR>
<A HREF="http://javascript.faqts.com" TARGET="_blank" 
   ONCLICK="if (document.all || document.getElementById) this.blur(); 
return true;"
><IMG SRC="http://www.faqts.com/symphony/local/brands/faqts/javascript-
faqts.gif" BORDER="0"></a>
<BR>
<A HREF="javascript: void 0"
   ONCLICK="if (document.all || document.getElementById) this.blur(); 
return false;" 
   ONDBLCLICK="alert('link action'); if (document.all || 
document.getElementById) this.blur(); return false;"
>
link1
</a>
<BR>
</body>
</html>
Note that IE5.5 provides a special attribute
  HIDEFOCUS
for page elements to avoid the focus border. So for IE5.5 you can use
  <A HREF="http://Javascript.FAQTs.com" HIDEFOCUS>
to avoid the border.
The simplest way to suppress the dashed focus borders is offered by
Mozilla using CSS:
:link:focus, :visited:focus {-moz-outline:0px;}