当某些字段被CSS隐藏时(在手风琴容器中),有用地设置选项卡索引

Question

我想让一个更大的形式更友好.在特殊情况下使用了许多字段,这些字段隐藏在手风琴容器内,如果需要,可以使用链接来展示它们.

但是(至少在Chrome中)如果您选择字段,则最终会将焦点放在视图中隐藏但键盘输入可访问的字段上.

什么是Good™处理方法？使用jQuery根据display!= none设置tabindex,然后在手风琴事件发生时重新设置？也许当CSS隐藏的字段获得焦点时,封闭的手风琴会被打开？

这是一个使用下面的html演示问题的jsfiddle.选项卡从可见到手风琴链接到隐藏文本输入和最后可见:http://jsfiddle.net/2EfXM/

<p class="file_info">
    <label>Visible
        <input type="text" name="vis1" id="vis1" class="date" value="" />
    </label>
</p>
<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading"> <a class="accordion-toggle accordion-arrow" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Show more fields
      </a>

        </div>
        <div id="collapseOne" class="accordion-body collapse out">
             <h5>Source/Use Metadata</h5>

            <p class="file_info">
                <label>Hidden:
                    <input type="text" name="default_original_source" id="default_original_source" class="" value="" />
                </label>
            </p>
        </div>
    </div>
</div>
<p class="file_info">
    <label>Visible
        <input type="text" name="vis2" id="vis2" class="date" value="" />
    </label>
</p>

一个有趣的旁注:使用display:none然后在IE 9中打破了jQuery验证.它在隐藏字段上引发了错误:

SCRIPT5007: Unable to get value of the property 'call': object is null or undefined jquery.validate.js, line 1174 character 5

经过一些研究,这是最终的解决方案:

.collapse input {
    visibility: hidden;
}

.collapse.in input {
    visibility:visible;
}

Answer 1

更新以保持手风琴的工作和形式验证

您的主要问题是代码需要设置一个visibility: hidden(注意:最初我有display: none,但是根据下面的OP评论创建了表单验证问题)到折叠元素.使用时visibility: hidden,会忽略Tab键(因为元素在文档中不再具有可见性).

您之前小提琴中的代码只是设置了height: 0.这个修改过的小提琴添加了一些CSS来控制它visibility:

.collapse input {
    visibility: hidden;
}

.collapse.in input {
    visibility: visible;
}

它正如你所愿运作.