CODEWITHSUNDEEP
javascriptjqueryhtml
Thanh Trung
Thanh Trung

Reputation: 3804

Keep tabindex order if element is hidden

This is a demo fiddle : http://jsfiddle.net/gLq2b/

<input value="0" />
<input id="test" value="1" />
<input value="2" />

If you press TAB repeatedly, it should focus on the 1st, 2nd, then 3rd input by order. So if for some reason, the 2nd input is hidden when it is focused, if you press TAB again, the tabindex order is resetted and you got to start from the beginning.

How to make it focus on the 3rd input instead when I press TAB again after the 2nd input is hidden?

Note that the input is just a test case, it could be a radio, a select, or any tabbable element with "tabindex" attribute, etc..

Upvotes: 1

Views: 1740

Answers (2)

timing
timing

Reputation: 6455

Just don't hide it but animate to an opacity of 0 and make the input field as small as possible at the end of the animation

$(this).animate({opacity:0}, function(){
    $(this).css({width:0,margin:0,padding:0});   
});

Fiddle: http://jsfiddle.net/gLq2b/5/

Upvotes: 1

Alon Eitan
Alon Eitan

Reputation: 12025

you could change this line $(this).fadeOut(); to

$(this).next().focus().end().fadeOut();

example

EDIT: Is this what you're looking for?

$(function(){
   $('#test').focus(function(){     
       $(this).fadeOut(function() {
           $(this).next().focus();
       });
   });
});

new example

Upvotes: 0

Related Questions