jQuery :focus 选择器（手把手讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在网页开发中，用户与界面的交互往往依赖于元素的“焦点”状态。无论是填写表单、切换导航菜单，还是操作动态组件，开发者都需要精准控制元素在获得或失去焦点时的行为。jQuery :focus 选择器正是为此而生的工具，它简化了焦点事件的处理流程，帮助开发者快速实现交互逻辑。本文将从基础概念到实战案例，逐步解析这一选择器的使用方法与核心技巧，尤其适合编程初学者和中级开发者深入理解。

理解焦点事件的基础概念

什么是“焦点”？

在网页中，“焦点”（Focus）指用户当前正在与之交互的元素。例如，当用户点击一个输入框时，该输入框会获得焦点，此时用户可以通过键盘输入内容；当用户点击页面其他区域时，输入框会失去焦点。焦点的存在让开发者能够根据用户的行为触发特定功能，比如高亮显示当前操作区域或验证表单输入。

原生 JavaScript 的焦点事件

在原生 JavaScript 中，焦点相关事件主要通过以下方式实现：

• focus：当元素获得焦点时触发。
• blur：当元素失去焦点时触发。

例如，为输入框绑定焦点事件：

document.querySelector('input').addEventListener('focus', function() {
    console.log('输入框已获得焦点');
});

但这样的代码需要针对每个元素单独编写，且事件处理逻辑较为分散。而 jQuery :focus 选择器通过简化语法和链式操作，让开发者更高效地管理焦点状态。

jQuery :focus 选择器的核心语法

基础用法

jQuery 的 :focus 选择器直接匹配当前获得焦点的元素。其基本语法如下：

$( ":focus" )

该选择器会返回所有当前处于焦点状态的元素集合。例如，若页面中有多个输入框，当用户点击其中一个输入框时，$( ":focus" ) 会返回该输入框的 jQuery 对象。

与元素选择器结合使用

通常，开发者会将 :focus 与其他选择器组合，以精准定位目标元素。例如：

$("input:focus") // 选择所有获得焦点的输入框  
$("#nav-menu:focus") // 选择 ID 为 "nav-menu" 且获得焦点的元素  

示例：动态高亮当前焦点元素

以下代码会在用户点击输入框时，为其添加蓝色边框：

$(document).ready(function() {
    $("input").focus(function() {
        $(this).css("border", "2px solid blue");
    }).blur(function() {
        $(this).css("border", "");
    });
});

这里通过 focus() 和 blur() 方法分别绑定获得焦点和失去焦点时的回调函数，结合 :focus 选择器可进一步简化代码逻辑。

结合 CSS 的焦点样式控制

与 CSS 伪类 :focus 的关系

原生 CSS 的 :focus 伪类可以定义元素获得焦点时的样式。例如：

input:focus {
    outline: 2px solid #4CAF50;
}

而 jQuery :focus 选择器则可以动态修改样式或执行其他 JavaScript 逻辑，两者互补。

动态样式切换案例

假设需要在焦点状态时改变输入框背景色，并在失去焦点后恢复：

$(document).ready(function() {
    $("input").focus(function() {
        $(this).addClass("focused");
    }).blur(function() {
        $(this).removeClass("focused");
    });
});

配合 CSS：

.focused {
    background-color: #f0f8ff;
    border: 1px solid #87CEEB;
}

高级技巧与常见场景

1. 处理键盘导航的焦点控制

在无障碍开发中，用户可能通过键盘 Tab 键导航页面。开发者可以通过 :focus 选择器监听焦点变化，例如记录用户当前操作的元素：

$(document).on("keydown", function(event) {
    if (event.key === "Tab") {
        setTimeout(function() {
            var focusedElement = $( ":focus" );
            console.log("当前焦点元素:", focusedElement.attr("id"));
        }, 0);
    }
});

这里利用 setTimeout 确保焦点切换完成后再获取当前元素。

2. 表单验证与焦点联动

在表单提交前，可检查输入是否合法，并自动将焦点移动到第一个无效字段：

function validateForm() {
    var isValid = true;
    $("input[type='text']").each(function() {
        if ($(this).val().trim() === "") {
            isValid = false;
            $(this).focus(); // 自动聚焦到空字段
            return false; // 终止循环
        }
    });
    return isValid;
}

通过 focus() 方法强制元素获得焦点，引导用户修正输入。

3. 移动端的焦点优化

在移动端，输入框获得焦点时通常会触发软键盘弹出。结合 :focus 可实现自适应布局调整：

$("input").focus(function() {
    $(this).closest(".form-group").addClass("expanded");
}).blur(function() {
    $(this).closest(".form-group").removeClass("expanded");
});

配合 CSS 动态扩展容器高度，避免输入框被键盘遮挡。

常见问题与解决方案

问题 1：焦点事件未触发

原因：元素可能不可聚焦（如 <div> 未设置 tabindex）。
解决方案：

• 为元素添加 tabindex="0" 属性，使其支持键盘 Tab 导航。
• 确保事件绑定在 DOM 加载完成后执行（如使用 $(document).ready()）。

问题 2：多元素焦点状态冲突

场景：多个元素需要同时响应焦点事件，但逻辑复杂。
解决方案：

• 使用 :focus 选择器结合过滤条件，例如：

  $(":focus").filter(".important-field").doSomething();
  

• 通过 event.stopPropagation() 防止事件冒泡干扰。

问题 3：移动端焦点样式不明显

解决方案：

• 在 CSS 中针对移动端重定义 :focus 样式：

  @media (max-width: 768px) {
      input:focus {
          box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
      }
  }
  

结论

jQuery :focus 选择器是开发者控制元素焦点状态的利器，它简化了原生 JavaScript 的复杂操作，并与 CSS 紧密结合，实现丰富的交互效果。无论是表单验证、动态样式控制，还是移动端优化，都能通过这一选择器快速落地。对于初学者而言，建议从基础语法开始，逐步尝试结合其他选择器和事件方法，最终掌握灵活的焦点管理技巧。

通过本文的实战案例和技巧解析，读者应能理解如何在实际项目中高效使用 jQuery :focus 选择器，并解决常见问题。随着技术经验的积累，开发者可以进一步探索其与动画库、表单验证框架的深度整合，打造更流畅的用户交互体验。