CODEWITHSUNDEEP
javascripthtmldom-events
Rakesh
Rakesh

Reputation: 5893

How do I disable tabs for <a> tag

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

Upvotes: 41

Views: 58206

Answers (5)

Sergey Ilinsky
Sergey Ilinsky

Reputation: 31545

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.

Upvotes: 183

Evan Fosmark
Evan Fosmark

Reputation: 101811

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

Upvotes: -5

user669677
user669677

Reputation:

Tag <a> must be able to being tab-indexed. It makes navigation easier.

use <p> or <span> instead, width onclick="window.location.href='URL'" event attribute.

example:

<span onclick="window.location.href='http://www.w3schools.com'">text that redirects you to W3S on click, where you can read more about HTML standards.</span>

Upvotes: 0

meouw
meouw

Reputation: 42140

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

Upvotes: 5

user19302
user19302

Reputation:

Try

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

Upvotes: 0

Related Questions