在打开的Select2下拉菜单中按下Escape键不应该关闭Bootstrap模态框。

Question

使用Twitter Bootstrap 3，在模态框中嵌入了一个Select2下拉菜单。
现在，当按下打开的Select2元素上的Escape键时，下拉菜单和模态对话框会立即关闭。

如何防止在这种情况下关闭模态框？
然而，在按下Escape键关闭当前聚焦的下拉菜单时，关闭模态框是可以的。因此，在上述描述的情况下，需要按两次Escape键：第一次关闭下拉菜单，第二次关闭模态框。

我准备了一个jsfiddle来轻松复现这种行为http://jsfiddle.net/a82RX/。
（我使用了与Bootstrap文档中相同的模态框和非常简单的Select2下拉菜单。）

我已经尝试通过监听来干预并取消模态框的关闭。

  select2-close

事件，没有成功。

- mkurz

Answer 1

我也遇到了这样的情况，不过我找到了解决方法。它是不同想法的结合。

1）当显示模态时，将键盘设置为false。代码正是@ravimallya提供的代码。

2）侦听“esc” keyup事件。（我猜你也可以侦听keydown /keypress事件，但我选择了keyup）

var ESCAPE_KEY = 27;
$('#myModal').on('keyup', function (event) {
    if (event.which === ESCAPE_KEY) {
        $('#myModal').modal('hide');
    }
});

3) [奖励] 我还实现了双重转义以关闭模态功能，这不是很明显，所以决定与大家分享。基本上，当焦点在select2上并且下拉菜单已打开时，按下“Esc”键，select2下拉菜单会关闭。但是如果您再次按下“Esc”键，则不会发生任何事情。虽然第二个“Esc”的行为是正确的，但我更喜欢它关闭模态框。因此，这是我的代码实现：

$('#mySelect').select2();
var mySelectContainer = $(mySelect).data('select2').container;
$(mySelectContainer).on('keyup', function (event) {
    if (event.which === KeyCodes.Escape) {
        $('#myModal').modal('hide');
    }
});

选择 select2-close 事件不起作用的原因是，模态框的 keyup（或类似）处理程序在“esc”发生后立即触发。

顺便说一句，如果你发现自己订阅了很多 keyup/keydown/keypress 事件，你可能想检查一下 JQuery HotKeys。如果你已经在使用它，那么上面的解决方案看起来像这样：

$('#myModal').on('keyup', null, 'esc', function () {
    $('#myModal').modal('hide');
});

- Parth Shah

---

我曾经遇到过同样的问题，这个解决方案非常有效。@mkurz - 你应该将这个答案标记为最佳答案 :) - pesho hristov

Answer 2

使用

  $('#myModal').modal({keyboard:false});

参考 http://getbootstrap.com/javascript/#modals-usage

完整解决方案：

HTML

<button class="btn btn-primary btn-lg" id="modalLaunch">Launch demo modal</button>

脚本：

$(function() {
    $("#e1").select2();
    $("#modalLaunch").click(function() {
        $('#myModal').modal({
            show:true,
            keyboard:false,
            backdrop:'static'
        });
    });
});

- Ravimallya

---

谢谢您的回答。但那不是我要找的。keyboard:false完全禁用了esc键的功能，但我只想在我按下打开的select2下拉菜单中的esc键后禁用它，这样只有下拉菜单会被关闭。然而，当按下esc键时，如果下拉菜单已关闭，则关闭模态框是可以的。 - mkurz

http://jsfiddle.net/ravimallya/a82RX/14/ 这是你想要实现的吗？在这里，我使用了 $("#e1").on("select2-close", function () { $('#myModal').modal('hide'); }); 来在选择下拉选项后隐藏模态框。你可以结合 select2 的 事件 和 bootstrap 模态框的 JavaScript 来实现。 - Ravimallya

不，这不是我想要实现的。也许我没有解释清楚（我不是以英语为母语）。我想要实现的是相反的，就像这样：“当下拉菜单打开并按下 Esc 时，现在应只关闭下拉菜单，但模态框应保持打开状态。”不管怎样，还是感谢你的努力。 - mkurz

你解决了吗？我现在也在苦苦挣扎着同样的问题。 - Mattias Nordqvist

8年过去了，似乎我还是有同样的问题 :) - Skip

Answer 3

这个答案有点晚了，但我还是想在这里发布我的解决方案，因为我今天遇到了同样的问题。我的select2下拉菜单在你试图用escape键关闭打开的下拉菜单时关闭了模态框。

为了解决这个行为，我添加了一个事件监听器，检查是否在打开的下拉菜单上按下了escape键。如果是，它应该停止传播并使用select2.('close')方法关闭下拉菜单。

 $(document).on('select2:open', () => {

    window.addEventListener('keydown', function (e) {
        let dropdown = $('.select2-hidden-accessible');
        if ((e.key === 'Escape' || e.key === 'Esc') && $('.select2-container--open').length) {
            e.stopPropagation();
            dropdown.select2('close');
            return false;
        }
    }, true);
});

- Skip