当display:none时,Tab键显示输入字段

Question

设想:

<div>
    <input tabindex="1">
</div>
<div style="display:none">
    <input tabindex="2">
</div>
<div>
     <input tabindex="3">
</div>

现在我试图通过所有这些输入字段进行选项卡,但他没有踩到tabindex 2.逻辑上这不起作用,但我如何实现当他在tabindex 1上并且应该去tabindex 2那个div变得可见了？

谢谢

Answer 1

正如评论中所提到的那样,让你div拥有opacity: 0.当您专注于隐藏的输入时,就可以实现它opacity: 1.就像是:

<div>
    <input tabindex="1"/>
</div>
<div style="opacity: 0">
    <input tabindex="2"/>
</div>
<div>
    <input tabindex="3"/>
</div>        

JS:

$('div:eq(1) input').on('focus', function() {
    $(this).parent().css('opacity','1');
}).on('blur', function() {
    $(this).parent().css('opacity','0');
});

小提琴

或者你可以用height(height: 0/ height: auto)做点什么:

小提琴

但是从用户体验的角度来看,有一个额外的input弹出窗口你会发现它并不奇怪.