How do I disable tabs for <a> tag

Question

Hi,

I am using tags for links on a web page. How do I disable tab key from selecting either of them.

Answer 1

Try

<a onfocus="this.blur();" href = "bla">Bla</a>

Answer 2

You could do something like this for those links:

 <a href="http://foo.bar" onfocus="this.blur()">Can't focus on this!</a>

You should use the answer below, though.

Answer 3

Alternatively you could go for plain HTML solution.

<a href="http://foo.bar" tabIndex="-1">inaccessible by tab link</a>

Answer 4

I've had to prevent divs with and overflow: auto css rule from having a tab stop before and what I did was (transposed for a's):

var links = document.getElementsByTagName( 'a' );

for( var i = 0, j =  links.length; i < j; i++ ) {
    links[i].setAttribute( 'tabindex', '-1' );
}

Using tabindex rather than blurring means the focus will skip to the next element.

Are you sure you want to disable tabindex though? It's kinda vital for navigation without a mouse.

Just noticed a similar answer in plain HTML

Answer 5

I like meouw's version because it validates and it is easy to implement across all anchor tags. However, it doesn't seem to work in IE. Putting tabIndex="-1" in every single anchor tag appears to be the only solution IE will recognize. Someone please correct me because I would love to use this script.