Reputation: 199
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
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
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
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
Reputation: 543
It would help if you posted your code, but you could try something like this:
$("#hidden").attr("disabled","disabled");
Upvotes: 0