Bootstrap中data-keyboard="false"属性失效问题求助

你遇到的问题核心是Bootstrap下拉菜单组件并不支持data-keyboard="false"属性——这个属性是专门为模态框（Modal）设计的，所以你添加后不会生效。要禁用Esc键关闭下拉菜单，需要通过JavaScript拦截对应的键盘事件。

解决方案 #

方法1：全局拦截Esc键事件（推荐） #

监听文档的keydown事件，当下拉菜单处于展开状态时，阻止Esc键事件的冒泡，避免Bootstrap的默认处理逻辑触发：

原生JavaScript实现

document.addEventListener('keydown', function(e) {
  const activeDropdown = document.querySelector('.dropdown.open');
  if (activeDropdown && e.key === 'Escape') {
    e.stopPropagation();
  }
});

jQuery实现（适配Bootstrap jQuery版本）

$(document).on('keydown', function(e) {
  if ($('.dropdown.open').length > 0 && e.key === 'Escape') {
    e.stopPropagation();
  }
});

方法2：自定义下拉菜单初始化配置 #

如果通过JS手动初始化下拉菜单，可以在初始化时绑定自定义键盘事件处理：

$('.dropdown').dropdown().on('keydown', function(e) {
  if (e.key === 'Escape') {
    e.stopPropagation();
  }
});

原代码问题说明 #

你在按钮和下拉菜单容器上添加的data-keyboard="false"属性对Bootstrap下拉菜单无效，因为该属性不属于dropdown组件的配置项，仅适用于Modal组件。

内容的提问来源于stack exchange，提问作者Deekshith Shetty