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

【问题标题】：Tab throug input fields when display:none显示时通过输入字段选项卡：无
【发布时间】：2014-08-15 09:22:14
【问题描述】：

想象一下：

<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 变得可见？。

谢谢

【问题讨论】：

让它opacity: 0 我认为这将使 tabindex 工作。然后，当您专注于该领域时，您会删除 opacity。

标签： javascript jquery html input tabindex

【解决方案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 弹出窗口会很奇怪。

【讨论】：

【解决方案2】：

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

只是说基本上height:0 并不总是有效，在这些情况下极端的translate: transformX(-999) 或更简单的left: -999px 和position: absolute 也同样有效。

【讨论】：