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

但是从用户体验的角度来看，如果你不想要一个额外的input弹出窗口会很奇怪。

Answer 2

我对这里给出的建议有疑问，而是决定使用left: -999px; position: absolute;只是将鼠标悬停在鼠标悬停或键盘导航上（使用tabindex）。

只需说基本上height:0并不总是有效，在那种情况下，极端translate: transformX(-999)或更简单的left: -999px与position: absolute也可以工作。

显示时，通过输入字段选项卡：无

2 个答案: