17370845950

本文详解如何修复 jquery 实现的搜索框在 firefox 中点击输入框后立即隐藏（失焦闪退）的问题，通过修正事件冒泡逻辑与 focus 时机，实现 chrome 与 firefox 行为一致的稳定交互体验。

在 Web 开发中，一个常见的交互模式是：点击标题展开搜索区域，再点击输入框使其获得焦点并保持展开状态。然而，原代码在 Firefox 中表现异常——用户点击 后，.block-content 会瞬间 hide()，导致输入框“闪退”，无法正常输入。根本原因在于 Firefox 对 mouseup 事件的触发时机更严格，且原逻辑未阻止事件冒泡与误判。

? 问题根源分析

1. blur() 强制调用破坏用户体验：
   原代码在标题点击时执行 $(".input-text").blur()，不仅无必要，反而在 Firefox 中可能触发意外失焦，干扰后续 focus 流程。
2. $(document).mouseup 全局监听缺乏精准过滤：
   原逻辑 $(document).mouseup(...) 在任意位置点击都会隐藏内容区，包括点击输入框本身——而 Firefox 中，mouseup 在 上触发后，紧接着执行 hide()，导致刚 show 出来的输入框被立即隐藏。
3. .focus() 调用时机不当：
   在 .click() 回调中异步 focus 输入框，若 DOM 尚未完全可见（尤其在 toggle() 过渡中），Firefox 可能拒绝聚焦，造成 focus 失败。

✅ 正确解决方案

关键改进点：

• 移除冗余的 blur()；
• 使用 e.target 精准判断点击是否发生在输入框内部；
• 在 .click() 中先 show() 再 focus()，确保 DOM 可见性；
• 避免对输入框本身触发隐藏逻辑。

以下是优化后的完整代码：

$(document).ready(function() {
    var $content = $(".block-search .block-content");
    $content.hi
de();

    // 点击标题：切换显示 + 立即聚焦输入框
    $('.block-search .block-title').click(function() {
        $content.toggle();
        $content.find(".input-text").focus(); // 确保聚焦已显示的输入框
    });

    // 点击输入框：强制显示 + 聚焦（防 Firefox 失焦）
    $(".input-text").on('click', function(e) {
        e.stopPropagation(); // 阻止冒泡至 document，避免被 mouseup 拦截
        $content.show();
        $(this).focus();
    });

    // 全局点击隐藏：仅当点击非输入框区域时生效
    $(document).on('mouseup', function(e) {
        if (!$(e.target).closest('.input-text').length && 
            !$(e.target).closest('.block-search').length) {
            $content.hide();
        }
    });
});

? 小技巧：使用 .closest() 替代 .hasClass() 更健壮——它能正确识别点击目标是否为输入框或其任意祖先（如 .block-search），防止误关。

? 注意事项与最佳实践

• 不要依赖 toggle() 后立刻 focus()：若需动画过渡，建议改用 fadeIn()/slideDown() 并在回调中 focus；
• 禁用移动端长按选中文本干扰（可选）：为 .input-text 添加 CSS：

  .input-text {
      -webkit-user-select: text;
      -moz-user-select: text;
      user-select: text;
  }

• 语义化增强：为 .block-title 添加 role="button" 和 tabindex="0"，支持键盘访问（无障碍必备）；
• jQuery 版本兼容性：示例使用 1.12.4，若升级至 3.x，请将 $.browser 相关逻辑替换为特性检测（本例无需）。

通过以上调整，该搜索组件在 Chrome、Firefox、Edge 及主流移动端浏览器中均能保持一致、稳定的点击聚焦行为——点击标题展开，点击输入框不关闭、立即可编辑，全局点击空白处才收起，真正实现跨浏览器鲁棒交互。