当一些字段被CSS（在手风琴容器中）隐藏时，如何有用地设置标签索引

Question

当一些字段被CSS（在手风琴容器中）隐藏时，如何有用地设置标签索引

jquerycssaccordiontabindex

17

我想让一个大型表格更加友好。有一些用于特殊情况的字段被隐藏在手风琴容器内，提供链接以在需要时显示它们。

然而（至少在Chrome中）如果您通过字段进行制表符，您将最终聚焦于对键盘输入可用但从视图中隐藏的字段。

处理这个问题的好方法是什么？使用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>

有趣的一点是：在IE 9中使用display:none会破坏jQuery验证。它会在隐藏字段上抛出错误：

SCRIPT5007：无法获取属性“call”的值：对象为null或未定义 jquery.validate.js，1174行，字符5

经过一些研究，这是最终的解决方案：

.collapse input {
    visibility: hidden;
}

.collapse.in input {
    visibility:visible;
}

- jerrygarciuh

你能发一下相关的HTML代码吗？JSFiddle可能也会有帮助。 - A. Wolff

已添加了 jsfiddle 和展示问题的 HTML。谢谢。 - jerrygarciuh

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ScottS · Accepted Answer

更新以使手风琴工作并验证表单

你的主要问题在于代码需要设置 visibility: hidden（注意：原本我使用了display: none，但根据下面OP的评论，这会导致表单验证问题）来隐藏折叠元素。使用 visibility: hidden 后，元素不再在文档中可见，因此无法通过tab键访问。

你之前的示例中的代码只设置了 height: 0。这个修改过的示例添加了一些CSS来控制 visibility：

.collapse input {
    visibility: hidden;
}

.collapse.in input {
    visibility: visible;
}

它按照您的要求运作。