点击搜索框不拉长的主因是focus事件被拦截或父容器宽度限制，应检查:focus伪类是否生效、避免e.preventdefault()、用:focus-within css方案或flex布局解耦宽度约束。

搜索框点击后不拉长？检查 focus 事件是否被拦截

bootstrap 默认的 .form-control 搜索框不会自动拉长，所谓“点击拉长”其实是靠 css 动态调整宽度（比如从 200px 扩展到 100%），但前提是 focus 事件能正常触发。常见干扰包括：preventdefault() 错误绑定、父容器 overflow: hidden 截断动画、或第三方库（如某些 ui 组件）劫持了输入框焦点逻辑。

• 用浏览器开发者工具检查元素，点击后看 :focus 伪类是否生效（在 Styles 面板里搜 :focus）
• 确认没在 JS 中对 input 或其父级绑定了 focus 并调用 e.preventDefault()
• 如果用了 bootstrap-select 或 typeahead 类插件，它们可能替换了原生 input，此时需查对应插件文档看是否支持 onFocus 回调

用 :focus-within + CSS 实现无 JS 拉长

最轻量、兼容性够用（Chrome 65+、Firefox 64+、Edge 79+）的做法：把搜索框包进一个容器，用 :focus-within 控制容器内 input 的宽度。不用监听 JS 事件，避免冲突，也省去防抖/重复绑定问题。

• HTML 结构必须是父子关系：

  <div class="search-container">
    <input type="text" class="form-control">
  </div>

• CSS 写法：

  .search-container {
    width: 200px;
  }
  .search-container:focus-within input {
    width: 100%;
  }
  /* 可加 transition 让拉长更顺滑 */
  .search-container input {
    transition: width 0.2s ease;
  }

• 注意：如果容器有 padding 或 border，width: 100% 会撑出滚动条，建议改用 flex 布局或加 box-sizing: border-box

jQuery 里用 focus/blur 手动控制宽度？小心多次绑定

如果你项目里已大量用 jQuery，且必须 JS 控制（比如要兼容 IE11），直接监听 focus 是可行的，但容易因重复初始化导致同一个元素绑定多个事件，一点击就拉长两次再缩回去。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• 确保只绑定一次：

  $('input.search-input').off('focus blur').on('focus', function() {
    $(this).animate({width: '100%'}, 200);
  }).on('blur', function() {
    $(this).animate({width: '200px'}, 150);
  });

• 不要在 AJAX 加载后反复执行这段代码；如果组件可销毁重建，记得在销毁前调用 .off()
• animate() 在 Bootstrap 5+ 中可能和 transition 冲突，建议统一用 CSS transition，JS 只负责切 class

Bootstrap 5 的 form-control 宽度受限于父容器？

很多“拉不长”本质不是交互问题，而是布局限制：.form-control 默认是 display: block 且 width: 100%，但它 100% 是相对于父容器算的。如果父容器是 .col-md-3 或带固定 max-width 的 div，那再怎么 focus 也超不出那个范围。

• 快速验证：临时给父容器加 style="background: pink; max-width: none !important;"，看拉长是否恢复正常
• 推荐解法：用 flex 父容器 + flex-grow-1，比硬写 width: 100% 更可靠

  <div class="d-flex">
    <input type="text" class="form-control flex-grow-1"><button class="btn btn-outline-secondary">搜索</button>
  </div>

• 如果用的是 .input-group，注意 .input-group-text 和 .form-control 默认是等宽分配，需额外加 flex: 1 到 .form-control

实际调试时，90% 的“点不开”问题出在父容器约束或焦点被吞，而不是 Bootstrap 本身不支持。先开 DevTools 看 computed width 和 :focus 状态，比翻文档快得多。