17

我正在尝试使大型表单更友好。在特殊情况下使用了许多字段，这些字段隐藏在手风琴容器中，如果需要，可以通过链接公开它们。

但是（至少在 Chrome 中）如果您浏览字段，您最终会专注于隐藏在视图中但可以通过键盘输入访问的字段。

处理此问题的 Good™ 方法是什么？使用jQuery根据显示设置tabindex！= none然后在手风琴事件发生时重新设置？也许当一个被 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 中使用 then 破坏 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;
}
4

1 回答 1

20

更新以保持手风琴工作和表单验证

您的主要问题是代码需要为折叠的元素设置一个visibility: hidden（注意：最初我有display: none，但根据下面的 OP 评论创建了表单验证问题）。使用visibility: hidden时，制表符将被忽略（因为该元素在文档中不再具有可见性）。

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

.collapse input {
    visibility: hidden;
}

.collapse.in input {
    visibility: visible;
}

它按照你的意愿运作。

于 2013-05-31T16:01:51.297 回答