asp.net - onfocus="this.blur();" problem - Stack Overflow

admin管理员组

文章数量:1295948

// 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(); };
              }
                }
          }

// 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(); };
              }
                }
          }

• asp
• javascript
• jquery

Share Follow asked Mar 15, 2010 at 11:41 CarpenterCarpenter 15911 gold badge22 silver badges1818 bronze badges 1

• 3 Don't do this! It makes it impossible to navigate a page using a non-pointing device. You are going to make it inaccessible to people who use a keyboard, depend on a breath switch, etc, etc. – Quentin Commented Mar 15, 2010 at 11:47

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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.

It's not remended 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.

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?

本文标签： aspnetonfocusquotthisblur()quot problemStack Overflow