Select2在嵌入自举模式时不起作用

当我在引导模式中使用select2 (input)时，我不能输入任何东西。就像残疾?在modal之外select2工作正常。

工作示例:http://jsfiddle.net/byJy8/1/ 代码:

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Panel</h3>
    </div>
    <div class="modal-body" style="max-height: 800px">          
      <form class="form-horizontal">
        <!-- Text input-->
        <div class="control-group">
            <label class="control-label" for="vdn_number">Numer</label>
            <div class="controls">
                <!-- seleect2 -->
                <input name="vdn_number" type="hidden" id="vdn_number"  class="input-large" required=""  />
            </div>
        </div>
      </form>    
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>

$("#vdn_number").select2({
    placeholder: "00000",
    minimumInputLength: 2,
    ajax: {
        url: "getAjaxData/",
        dataType: 'json',
        type: "POST",
        data: function (term, page) {
            return {
                q: term, // search term
                col: 'vdn'
            };
        },
        results: function (data) { // parse the results into the format expected by Select2.
            // since we are using custom formatting functions we do not need to alter remote JSON data
            return {results: data};
        }
    }
});

答案:

在这里你可以找到一个快速的解决方法

这里是“正确的方法”:Select2在嵌入引导模式时不起作用

当前回答

好的，我把它弄好了。

改变

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Panel</h3>
    </div>
    <div class="modal-body" style="max-height: 800px">

<div id="myModal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Panel</h3>
    </div>
    <div class="modal-body" style="max-height: 800px">

（从模态中删除 tabindex=“-1”）

2013-08-28 12:07:07

其他回答

如果你使用stisla并使用firemodal:

$('#modal-create-promo').click(()=>{
    setTimeout(()=>{
        $('#fire-modal-1').removeAttr('tabindex');
    });
});

    $("#modal-create-promo").fireModal({
    ...
});

这是我的工作

2020-11-24 04:03:01

只需删除tabindex="-1"并添加样式overflow:hidden

这里有一个例子:

<div id="myModal" class="modal fade" role="dialog" style="overflow:hidden;">
    <!---content modal here -->
</div>

2016-12-16 15:09:31

根据官方的select2文档，这个问题的发生是因为Bootstrap模态倾向于从模态之外的其他元素窃取焦点。

默认情况下，Select2将下拉菜单附加到元素上，它被认为是“在模式之外”。

相反，使用dropdownParent设置将下拉菜单附加到模式本身:

$('#myModal').select2({
   dropdownParent: $('#myModal')
});

参考资料:https://select2.org/troubleshooting/common-problems

2019-03-20 12:03:33

我在github上找到了select2的解决方案

https://github.com/ivaynberg/select2/issues/1436

对于bootstrap 3，解决方案是:

$.fn.modal.Constructor.prototype.enforceFocus = function() {};

Bootstrap 4重命名了enforceFocus方法为_enforceFocus，所以你需要修补它:

$.fn.modal.Constructor.prototype._enforceFocus = function() {};

从以上链接复制的解释:

Bootstrap向focusin事件注册了一个监听器，它检查被聚焦的元素是覆盖本身还是它的后代——如果不是，它只是重新聚焦在覆盖上。随着select2下拉框被附加到正文，这有效地防止你在文本框中输入任何东西。您可以通过覆盖在模态上注册事件的enforceFocus函数来快速修复这个问题

2013-10-24 18:46:18

从模式中删除tabindex="-1"。我检查了这个解决方案，它是有效的。

裁判:https://github.com/select2/select2-bootstrap-theme/issues/41

2021-03-23 23:52:04

Select2在嵌入自举模式时不起作用

推荐文章

最新文章

标签