实现下拉菜单内Textbox自动获取焦点的技术问询

问题分析 #

Bootstrap 5下拉菜单默认点击外部区域会自动关闭，且打开时不会自动聚焦内部文本框。这会导致两种问题：一是点击文本框时菜单意外关闭，输入框失去焦点；二是用户需要手动点击输入框才能开始输入，操作不够流畅。

解决方案 #

通过监听Bootstrap的下拉事件和点击事件，实现两个核心功能：下拉展开时自动聚焦文本框，点击文本框时阻止菜单关闭。

添加以下JavaScript代码：

// 下拉菜单展开后自动聚焦内部搜索框
document.addEventListener('shown.bs.dropdown', function(e) {
  const searchInput = e.target.querySelector('.dropdown-menu .search');
  if (searchInput) {
    // 延迟执行确保DOM已就绪
    setTimeout(() => searchInput.focus(), 10);
  }
});

// 阻止点击搜索框时触发下拉菜单关闭
document.addEventListener('click', function(e) {
  const isSearchInput = e.target.classList.contains('search');
  const isInDropdown = e.target.closest('.dropdown-menu');
  if (isSearchInput && isInDropdown) {
    e.stopPropagation();
  }
});

完整可运行代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0">

<div class="input-group">
  <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
  <button type="button" class="btn btn-outline-secondary">Action</button>
  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu dropdown-menu-end">
    <input type="text" placeholder="Search.." class="form-control form-control-sm search" />
    <p>This is a text</p>
  </div>
</div>

<script>
document.addEventListener('shown.bs.dropdown', function(e) {
  const searchInput = e.target.querySelector('.dropdown-menu .search');
  if (searchInput) {
    setTimeout(() => searchInput.focus(), 10);
  }
});

document.addEventListener('click', function(e) {
  const isSearchInput = e.target.classList.contains('search');
  const isInDropdown = e.target.closest('.dropdown-menu');
  if (isSearchInput && isInDropdown) {
    e.stopPropagation();
  }
});
</script>

关键说明 #

• shown.bs.dropdown是Bootstrap提供的下拉展开完成事件，此时操作DOM能确保元素已完全渲染
• 阻止事件冒泡是为了避免点击输入框时，事件传递到下拉菜单的父元素触发关闭逻辑
• 延迟聚焦是为了兼容部分浏览器的渲染时序，确保焦点能正确设置到输入框上

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