CODEWITHSUNDEEP
javascriptjqueryhtml
Raghav
Raghav

Reputation: 199

Skip hidden tab indexes

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 coming hard coded in the html i process.

Upvotes: 5

Views: 2686

Answers (4)

Raghav
Raghav

Reputation: 199

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.

Upvotes: 3

Martin Wantke
Martin Wantke

Reputation: 4571

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.

Upvotes: 0

Alexander Hripak
Alexander Hripak

Reputation: 226

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.com/joelpurra/skipontab.

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

Upvotes: 1

Michael Dziedzic
Michael Dziedzic

Reputation: 543

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

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

Upvotes: 0

Related Questions