如果元素被隐藏，则保持 tabindex 顺序答案

【问题标题】：Keep tabindex order if element is hidden如果元素被隐藏，则保持 tabindex 顺序
【发布时间】：2014-02-20 20:17:18
【问题描述】：

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

如果你反复按TAB，它应该按顺序关注第1，第2，然后第3输入。因此，如果由于某种原因，第二个输入在聚焦时被隐藏，如果您再次按 TAB，tabindex 顺序将被重置，您必须从头开始。

在隐藏第二个输入后再次按 TAB 时，如何使其专注于第三个输入？

请注意，输入只是一个测试用例，它可以是单选、选择或任何具有“tabindex”属性的可选项卡元素等。

【问题讨论】：

【解决方案1】：

只是不要隐藏它，而是将其设置为不透明度为 0 并在动画结束时使输入字段尽可能小

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

【讨论】：

【解决方案2】：

您可以将这一行 $(this).fadeOut(); 更改为

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

编辑：这是你要找的吗？

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

【讨论】：

等等，这不是它的工作方式。我希望它专注于第二个输入，等待它失去焦点然后再次按 TAB 切换到第三个。不直接从 1 切换到 3
还是不行，我应该按TAB 2次到达第三个输入，而不是一次:(
@ThanhTrung 将 .next() 替换为 .prev() 以聚焦第一个输入，这样您就可以点击 TAB 并移动到第三个输入（但只有 1 次，而不是 2 次）。我不认为我有其他想法