Bootstrap 5下拉菜单：将.dropdown-toggle改为input后方向键失效如何解决？

在Bootstrap 5.3及更高版本中，将下拉菜单的触发元素从<button>改为<input>后，下拉菜单虽能正常显示，但方向键切换.dropdown-item的功能会失效，而5.0.1版本无此问题。这是因为Bootstrap后续版本调整了键盘事件处理规则，仅默认对button类型触发元素绑定完整的导航逻辑。

以下是两种恢复该功能的解决方案：

方案一：自定义键盘事件绑定 #

手动为input元素添加键盘事件监听，模拟原生下拉菜单的方向键导航行为：

<div class="dropdown">
  <input type="text" class="dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" placeholder="点击展开下拉" />
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.dropdown input.dropdown-toggle').forEach(input => {
    input.addEventListener('keydown', (e) => {
      const dropdown = input.closest('.dropdown');
      const menu = dropdown.querySelector('.dropdown-menu');
      const items = [...menu.querySelectorAll('.dropdown-item')];
      const activeIndex = items.findIndex(item => item === document.activeElement);

      // 下拉菜单未展开时不处理
      if (!menu.classList.contains('show')) return;

      switch(e.key) {
        case 'ArrowDown':
          e.preventDefault();
          const nextIndex = activeIndex === -1 ? 0 : (activeIndex + 1) % items.length;
          items[nextIndex].focus();
          break;
        case 'ArrowUp':
          e.preventDefault();
          const prevIndex = activeIndex === -1 ? items.length - 1 : (activeIndex - 1 + items.length) % items.length;
          items[prevIndex].focus();
          break;
        case 'Escape':
          // 按ESC关闭菜单并将焦点放回输入框
          menu.classList.remove('show');
          input.setAttribute('aria-expanded', 'false');
          input.focus();
          break;
      }
    });
  });
});
</script>

方案二：复用原生button触发逻辑（推荐） #

使用隐藏的button作为下拉菜单的实际触发元素，将input叠加在button上，既保留input的视觉和输入功能，又复用Bootstrap原生的键盘导航逻辑：

<div class="dropdown">
  <button class="btn dropdown-toggle d-flex align-items-stretch border p-0" 
          type="button" data-bs-toggle="dropdown" aria-expanded="false">
    <input type="text" class="flex-grow-1 border-0 bg-transparent outline-none" 
           placeholder="点击展开下拉" />
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

<style>
/* 调整样式让input看起来和普通输入框一致 */
.dropdown .dropdown-toggle input {
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
}
</style>

方案对比 #

• 方案一：完全自定义逻辑，无需修改DOM结构，但需要维护键盘事件代码，适配不同场景。
• 方案二：复用Bootstrap原生功能，稳定性更高，样式调整后几乎和原生input触发无差异，推荐优先使用。

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