javascript - 显示 :none 时在输入字段中切换

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');
});

Fiddle

或者您可以使用 height(height: 0/height: auto)做一些事情:

Fiddle

但是从用户体验的 Angular 来看，在您不期望的地方有一个额外的 input 弹出窗口会很奇怪。