Bootstrap下拉菜单按键阻止问题：上箭头键切换焦点至输入框需求

我完全懂你碰到的这个棘手问题——当焦点停在下拉建议列表的最顶部选项时，按上箭头本想切回输入框继续输入，结果Bootstrap的内置事件处理不仅阻止了焦点切换，搞不好还会把菜单关掉，确实闹心。下面给你一套可行的解决办法，亲测有效：

核心思路 #

Bootstrap的下拉组件会默认拦截键盘事件并阻止冒泡，所以我们需要手动监听下拉项的键盘事件，覆盖Bootstrap的默认逻辑，实现自定义的焦点切换和菜单保持展开的功能。

具体代码实现 #

HTML结构（简化版）

<div class="dropdown">
  <input type="text" id="searchInput" class="form-control dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="true">
  <ul class="dropdown-menu show" aria-labelledby="searchInput">
    <li><a class="dropdown-item active" href="#">建议项1</a></li>
    <li><a class="dropdown-item" href="#">建议项2</a></li>
    <li><a class="dropdown-item" href="#">建议项3</a></li>
  </ul>
</div>

JavaScript逻辑

// 获取输入框和所有下拉菜单项
const searchInput = document.getElementById('searchInput');
const dropdownItems = document.querySelectorAll('.dropdown-item');

// 为每个下拉选项绑定键盘按下事件
dropdownItems.forEach((item, index) => {
  item.addEventListener('keydown', function(e) {
    // 仅处理上箭头按键（keyCode 38）
    if (e.keyCode === 38) {
      // 当焦点在第一个下拉项时，执行自定义逻辑
      if (index === 0) {
        // 阻止Bootstrap的默认行为（比如滚动、关闭菜单）
        e.preventDefault();
        // 阻止事件冒泡，避免Bootstrap父组件捕获事件后干扰
        e.stopPropagation();
        // 将焦点切回输入框
        searchInput.focus();
        // 强制保持下拉菜单展开状态
        const dropdownInstance = new bootstrap.Dropdown(searchInput);
        dropdownInstance.show();
      }
    }
  });
});

// 可选优化：输入框获焦时自动展开下拉菜单
searchInput.addEventListener('focus', function() {
  const dropdownInstance = new bootstrap.Dropdown(this);
  dropdownInstance.show();
});

关键细节说明 #

• e.preventDefault()：直接阻止Bootstrap对箭头键的默认处理逻辑，避免菜单意外滚动或关闭。
• e.stopPropagation()：切断事件向上冒泡的路径，不让Bootstrap的下拉父组件捕获到这个按键事件，防止它执行隐藏菜单等操作。
• 手动调用dropdownInstance.show()：确保焦点切换到输入框后，下拉菜单依然保持展开，避免某些边缘场景下菜单自动收起。

内容的提问来源于stack exchange，提问作者Conny Olsson