Firefox 浏览器中实现稳定聚焦的输入框交互方案_技术教程

本文详解如何修复 jquery 实现的搜索框在 firefox 中点击输入框失焦、无法稳定聚焦的问题，通过优化事件绑定逻辑与条件判断，确保 chrome 与 firefox 行为一致。

在 Web 开发中，一个常见的交互需求是：点击标题展开搜索区域，点击输入框时保持其可见并自动获得焦点；同时，点击页面其他区域则收起搜索框。该逻辑在 Chrome 中往往能正常运行，但在 Firefox 中却容易出现「点击输入框后瞬间失焦/弹出又立即隐藏」的不稳定现象。根本原因在于 Firefox 对 mouseup/click 事件冒泡和目标判定更为严格，且原代码中存在两个关键缺陷：

重复触发隐藏逻辑：$(document).mouseup(...) 在输入框被点击时也会触发，而原判断未排除 .input-text 元素自身，导致刚显示就又被隐藏；
冗余 focus 调用与时机冲突：.blur() 强制失焦 + 后续 .focus()
在 Firefox 中易引发竞争，破坏聚焦稳定性。

✅ 正确解决方案

核心改进点如下：

移除不必要的 .blur() 调用；
将输入框 focus() 统一放在 .click() 处理器内，确保聚焦时机明确；
在全局 mouseup 中精准排除输入框及其子元素，避免误触发隐藏；
使用 e.target 判断时，推荐结合 closest() 提升容错性（兼容 label 包裹等场景）。

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

$(document).ready(function() {
    const $content = $(".block-search .block-content");
    $content.hide();

    // 点击标题：切换显示状态，并立即将焦点移至输入框
    $('.block-search .block-title').click(function() {
        $content.toggle();
        $content.find('.input-text').focus();
    });

    // 点击输入框本身：确保显示并聚焦（防止因 toggle 延迟或 CSS 动画导致未显示即聚焦）
    $('.input-text').on('click', function(e) {
        e.stopPropagation(); // 阻止冒泡至 document，避免触发隐藏
        $content.show();
        $(this).focus();
    });

    // 点击页面任意处：仅当点击目标非搜索框区域时才隐藏
    $(document).on('mouseup', function(e) {
        if (!$content.is(e.target) && 
            $content.has(e.target).length === 0 && 
            !$(e.target).hasClass('input-text') && 
            $(e.target).closest('.input-text').length === 0) {
            $content.hide();
        }
    });
});

? 注意事项与最佳实践

避免 toggle() + focus() 的竞态：Firefox 渲染更新略滞后于 JS 执行，建议先 show() 再 focus()，或使用 setTimeout(() => $input.focus(), 0) 微任务延后聚焦（如需更高兼容性）；
语义化结构增强可访问性：建议将 .block-title 改为
CSS 补充建议：为防止点击输入框时因 display: none → block 导致布局抖动，可改用 visibility: hidden + opacity: 0 配合 CSS 过渡动画，再用 pointer-events: none 控制交互可用性；
现代替代方案：若项目支持较新浏览器，可考虑用原生 Element.focus({ preventScroll: false }) 和 event.composedPath() 替代 jQuery，减少依赖。

通过以上调整，输入框在 Firefox 中的点击响应将变得完全稳定，聚焦行为与 Chrome 保持一致，且具备良好的可维护性与可扩展性。