I have the following html:

<span tabindex="19">

</span>

<span tabindex="20">

</span>

<span tabindex="21">

</span>

<span id="hidden" tabindex="22">

</span>

<span tabindex="23">

</span>

<span tabindex="24">

</span>

As you can see one of the span is hidden, the code to hide it is

#hidden
{
display: none;
}

I want a behavior where tab skips the hidden indexes. So i want something like this when i click tab:- go to 19,20,21,23,24

I have no way of controlling the tab indexes as they are ing hard coded in the html i process.

I have the following html:

<span tabindex="19">

</span>

<span tabindex="20">

</span>

<span tabindex="21">

</span>

<span id="hidden" tabindex="22">

</span>

<span tabindex="23">

</span>

<span tabindex="24">

</span>

As you can see one of the span is hidden, the code to hide it is

#hidden
{
display: none;
}

I want a behavior where tab skips the hidden indexes. So i want something like this when i click tab:- go to 19,20,21,23,24

I have no way of controlling the tab indexes as they are ing hard coded in the html i process.

• javascript
• jquery
• html

Share Improve this question Follow asked Jun 29, 2015 at 19:18 RaghavRaghav 19911 silver badge1010 bronze badges 1

• it works fine. check this fiddle jsfiddle/pd7Ld85h – Sushil Commented Jun 29, 2015 at 19:34

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Thank you guys!!

I tried a lot of things, so i was wrong in hiding it using

#hidden
{
display : none.
}

I tried

#hidden
{visibility : hidden }

and tab skips the links which are marked as hidden.

You could give it a negative tabindex which is supposed to be ignored by the browser. There are jQuery plugins that do this as well, such as SkipOnTab https://github./joelpurra/skipontab.

var $hidden = $('#hidden');
$hidden.attr('tabindex', '-' + $hidden.attr('tabindex'));

It would help if you posted your code, but you could try something like this:

$("#hidden").attr("disabled","disabled"); 

Normally the tab-event automatic skips a non visible HTML-element. However, the hard coded HTML part can override with JavaScript after the page has been loaded:

<script>
    window.addEventListener("load", function()
    {
        document.getElementById("hidden").setAttribute("tabindex", "-1");
    });
</script>

JQuery is also a solution, but 90kByte is a little bit heavy for this simply task.