如何防止 jQuery UI 自动完成 ESCAPE 关闭 Bootstrap 模式？答案

【问题标题】：How to prevent jQuery UI autocomplete ESCAPE from closing Bootstrap modal?如何防止 jQuery UI 自动完成 ESCAPE 关闭 Bootstrap 模式？
【发布时间】：2014-09-04 11:43:28
【问题描述】：

我有一个 Twitter Bootstrap 模式，其中有一个带有 jQuery UI 自动完成的字段。显示自动完成建议菜单时，用户可以按键盘上的 ESCAPE 将其关闭。但是，这也会关闭 Bootstrap 模式，因为它还会监听 ESCAPE 键被按下。

只要自动完成建议菜单正在/刚刚被 ESCAPE 键关闭，有没有办法防止模式被关闭？

注意：我不希望完全禁用模式上的转义键行为 - 仅当自动完成菜单打开并通过 ESC 关闭时。

【问题讨论】：

标签： jquery jquery-ui twitter-bootstrap autocomplete modal-dialog

【解决方案1】：

您只需要通过 JavaScript (Jquery) 使用 Bootstrap 模态属性，这样：

假设您的模态名称是#MyModal 使用它来防止用键盘关闭

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

要查看我在Bootply 的下一个示例中创建的实时示例！

问候和快乐编码

【讨论】：

很酷的解决方案！我喜欢我的 hackjob，但你的回答要优雅得多！
谢谢，但是当自动完成建议被隐藏时，我仍然想用转义关闭模式。
好吧@ragulka，我认为您可以在显示自动完成时将属性设置为 false 以避免转义关闭并且当自动完成隐藏时将属性设置为true 允许转义关闭您只需要控制这两个事件（自动完成时和自动完成时）

【解决方案2】：

试试这样的。让我们抓住转义键事件和模态隐藏事件：

var isEscapeKey = false;

$('#myAutoCompleteTextBox').on('keydown',function(e){
    if (e.keyCode == 27){
        isEscapeKey = true;
    } else{
        isEscapeKey = false;
    }
}).on('blur',function(){
    isEscapeKey = false;
});

$('#myModal').on('hide.bs.modal', function (e) {
    if (isEscapeKey){
        return false;
    }
});

未测试，但理论上应该在模态隐藏之前调用hide.bs.modal 事件，并且可以在此处停止。

【讨论】：