Question

我正在开发一个基于Bootstrap 3.2.0构建的Web应用程序。一切正常，除了我的input arrays所有{{3}}都无法在Firefox 33.1中编辑（Safari 8.0和Chrome 38.0.2125.122正常工作）。

我的设置页面如下所示：

<!-- Tab panes -->

<form method="post" class="form-horizontal" role="form">

    ...

    <div class="tab-content">
         <div role="tabpanel" class="tab-pane" id="social">

            <button type="button" class="social-add btn btn-success"><span class="glyphicon glyphicon-plus"></span> Add Social Icon</button>
            <br/><br/>

            <!-- Social Icons -->

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Social Icons</h3>
                </div>
            <div class="social-div panel-body">

                // Loop ...

                <div class="social-divs form-group">
                        <label class="col-sm-1"><span class="glyphicon glyphicon-move pull-right"></span></label>
                        <div class="col-sm-11">
                            <div class="col-sm-3">
                                <select name="social-type[]" class="form-control">
                                    // Loop ...
                                    <option value="...">...</option>
                                    // End Loop ...
                                 </select>
                            </div>

                            <div class="col-sm-6">
                                <input name="social-link[]" class="form-control" type="text" value="...">
                            </div>

                            <div class="col-sm-3">
                                <button type="button" class="social-remove btn btn-danger"><span class="glyphicon glyphicon-minus"></span> Remove</button>
                            </div>

                        </div>
                    </div>

                // End Loop ...

            </div>
        </div>
    </div>

    ...

</form>

正如您所看到的，我正在使用HTML输入数组方法来获取所有社交图标，因为用户动态创建它们并可以重新排序它们。如前所述，这一切在Safari和Chrome中都很完美，但选择框和文本字段无法在Firefox中进行编辑。

奇怪的是，如果我刚才：

<input name="social-link[]" class="form-control" type="text" value="...">

在Bootstrap面板和选项卡系统之外，文本字段是可编辑的。因此，Firefox和Bootstrap Panels或Tabs必须存在一些兼容性问题。

提前感谢您的帮助：）

Answer 1

我能够确定这是我在div容器上调用jQuery的方式。当您在所有可排序元素上调用disableSelection（）时，Firefox不喜欢这样：

$("#sort").sortable().disableSelection();

所以只需使用：

$("#sort").sortable();

可以找到更好的线程here。

Bootstrap 3.2.0 Panel内的输入数组与Firefox不兼容？

1 个答案: