Skip hidden tab indices

Question

Skip hidden tab indices

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 flights is hidden, the code to hide it,

#hidden
{
display: none;
}

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

I have no way to manage the indexes of the tabs as they are hardcoded in the html i process.

+3

javascript jquery html

Raghav June 29. 15 at 19:18

source to share

4 answers

Michael Dziedzic · Answer 1 · 2015-06-29T19:24:49+0000

It will help if you post your code, but you can try something like this:

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

Alexander hripak · Answer 2 · 2015-06-29T19:39:19+0000

You can give it a negative tabindex that should be ignored by the browser. JQuery plugins do this as well, like SkipOnTab https://github.com/joelpurra/skipontab .

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

Martin Wantke · Answer 3 · 2015-06-29T20:00:34+0000

Usually the tab-event function will automatically skip over the invisible HTML element. However, the hard-coded portion of the HTML can override JavaScript after the page has loaded:

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

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

Raghav · Answer 4 · 2015-06-29T23:22:46+0000

Thanks guys!

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

#hidden
{
display : none.
}

I tried

#hidden
{visibility : hidden }

and the tab skips links marked as hidden.

Skip hidden tab indices

More articles: