How do I disable tabs for <a> tag

Viewed 54108

I am using <a> tags for links on a web page. How do I disable the Tab key from selecting either of them?

5 Answers

Alternatively you could go for plain HTML solution.

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

The HTML5 spec says:

If the value is a negative integer
The user agent must set the element's tabindex focus flag, but should not allow the element to be reached using sequential focus navigation.

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

Try

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

EDIT: Hi, original author of this answer here. Don't use this one. Scroll down. StackOverflow won't let me remove this answer since it was accepted.


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.

https://stackoverflow.com/a/457115/974680

Related