0

I am wondering how to remove the automatic focus which automatically happens to the first anchor tag on page load.

I am not looking to disable all focus ability which is pretty much all I was able to find solutions to while researching this question. The focus should still apply and show when an anchor is clicked.

Here is the css (scss in this case) for the focus itself, which I want to remain.

&:focus {
     outline:3px solid #51ace9
}

I have tried doing something like this to get rid of the auto focus on page load:

window.onload= function() {
  var anchors = document.getElementsByClassName('my_class')
  for (var i = 0; i < anchors.length; i++) {
    anchors[i].blur();
  }
}

but it doesn't seem to work.

Can someone suggest a proper solution?

Dear1ofGdBear
  • 935
  • 2
  • 13
  • 26
  • 1
    Have you tried setting the `tabindex` attribute to be 0 or -1? – Elena Jan 07 '16 at 16:42
  • @Elena I have tried this, but I don't see how this will affect the autofocus. Doesn't `tabindex` just affect the way its tabbed through via the keyboard? – Dear1ofGdBear Jan 07 '16 at 16:52
  • what browser are you testing on? I'm on Chrome 47 and it doesn't autofocus anything. So I'm guessing either you have a script that is focussing something or it's a browser specific thing (your blur code works for me). I've been playing with this: https://jsfiddle.net/07c6Lw1d/ – jcuenod Jan 07 '16 at 17:00
  • @Dear1ofGdBear, that was just a guess – Elena Jan 07 '16 at 17:03
  • Take a look at this similar question: http://stackoverflow.com/questions/7827004/how-to-avoid-automatic-focus-on-first-input-field-when-popping-a-html-form-as-a – Surreal Dreams Jan 07 '16 at 17:11

1 Answers1

1
$(document).ready(function({  
 $("a").blur() ;

    });
AsgarAli
  • 2,201
  • 1
  • 20
  • 32