onfocus="this.blur();" problem

Question

// I am trying to apply an "onfocus="this.blur();"" so as to remove the dotted border lines around pics that are being clicked-on
  // the effect should be applied to all thumb-nail links/a-tags within a div..

  // sudo code (where I am):
  $(".box a").focus(  // so as to effect only a tags within divs of class=box |  mousedown vs. onfocus vs. *** ?? | javascript/jquery... ???
  function () 
  {
      var num = $(this).attr('id').replace('link_no', ''); 
      alert("Link no. " + num + " was clicked on, but I would like an  onfocus=\"this.blur();\" effect to work here instead of the alert...");

      // sudo bits of code that I'm after:
      // $('#link_no' + num).blur();
      // $(this).blur();
      // $(this).onfocus = function () { this.blur(); };


  }
  );

 // the below works for me in firefox and ie also, but I would like it to effect only a tags within my div with class="box"
   function blurAnchors2() 
             {
              if (document.getElementsByTagName) {
                   var a = document.getElementsByTagName("a"); 
                    for (var i = 0; i < a.length; i++) {
                          a[i].onfocus = function () { this.blur(); };
              }
                }
          }

Answer 1

It's not recommended to blur. If all you're looking at doing is hiding the focus lines, use this instead:

a[i].onfocus = function () { this.hideFocus = true; };

This will work for all versions of IE. For other browsers (including IE8 in standards mode) you can set the outline CSS style to hide focus outlines:

a {
    outline: none;
}

This would make your page much more keyboard friendly than blurring an element as it takes focus.

Answer 2

I would suggest using only CSS to remove the border.

img, a:active{
    outline: none;
}

Or is there a specific reason why JS must be used?

Answer 3

Thanks guys - I have gone for the css(a:focus):

img, a:focus{ outline: none; }

It seems to be working right(tabbing is still working and the borders are gone when clicking) for me... in both ie and firefox. Will have to now retrofit some other links to use it...

Thanks again.