上一篇讲了 blur()，现在来看它的搭档——focus()。当用户点击输入框、按 Tab 键导航到某个元素、或者用鼠标选中一个可交互的区域时，focus 事件就会被触发。focus() 方法专门用来捕获这个“获得焦点”的时刻。
浏览器本身会给获得焦点的元素一些默认的视觉反馈，比如输入框外面出现蓝色边框。但如果想要更明显的提示效果——比如高亮边框、显示操作提示文字、弹出格式说明——就需要用 focus() 来定制。
focus 事件主要用在表单元素（<input>、<select>、<textarea>）和链接（<a>）上，这些是可聚焦元素中使用频率比较高的几类。
语法形式
触发 focus 事件：
$(selector).focus()
程序化地让选中元素获得焦点，同时触发已绑定的 focus 处理函数。比如页面加载完成后自动让搜索框获得焦点，省去用户手动点击。
绑定 focus 事件：
$(selector).focus(function(){
// 元素获得焦点时执行的代码
})
给元素绑定一个获得焦点时执行的回调函数，这是日常开发中使用频率较高的写法。
基础示例：获得焦点时显示提示文字
下面这个例子展示了 focus() 的绑定用法。两个输入框分别对应姓名和密码，当用户点击输入框获得焦点时，旁边会显示提示文字，然后渐隐消失。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>focus() 基础示例</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<style>
.hint {
display: none;
color: #888;
margin-left: 10px;
font-size: 14px;
}
</style>
</head>
<body>
<p>
<input type="text" id="nameInput" placeholder="请输入姓名">
<span class="hint">请输入您的真实姓名</span>
</p>
<p>
<input type="password" id="pwdInput" placeholder="请输入密码">
<span class="hint">密码长度至少 6 位</span>
</p>
<script>
$("input").focus(function(){
$(this).next(".hint").css("display", "inline").fadeOut(2000);
});
</script>
</body>
</html>
点击任意一个输入框，旁边的提示文字会先显示出来，然后在 2 秒内渐隐消失。这里用 $(this).next(".hint") 来定位当前输入框对应的提示元素，保证每个输入框显示各自专属的提示信息。这种提示方式在登录表单和注册页面里很常见，用户体验比一直显示大段文字要好。
进阶示例：阻止用户在特定输入框中输入
有时候需要让某个输入框不可编辑，但又不想用 disabled 属性（因为 disabled 会改变元素外观且无法获取焦点）。这时候可以用 focus() 配合 blur() 来实现——当用户点击输入框获得焦点时，立刻让它失焦，达到“看得见但点不进去”的效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>focus 与 blur 阻止输入示例</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>
<input type="text" id="readonlyInput" value="此输入框不可编辑" style="background-color:#f0f0f0;">
<span style="color:#888;margin-left:8px;">点击尝试输入</span>
</p>
<p>
<input type="password" id="normalPwd" placeholder="此输入框可以正常输入">
</p>
<script>
$("input[type=text]").focus(function(){
$(this).blur();
});
</script>
</body>
</html>
点击第一个输入框，它刚获得焦点就立刻失焦了，光标无法停留在里面，自然也无法输入内容。第二个密码输入框不受影响，正常使用。这种手法在一些特殊场景下有用——比如某个字段的值需要由弹窗选择器来填充，不允许手动输入，但又希望输入框看起来是可交互的。不过需要说明的是，这种方法并非万无一失，用 Tab 键快速连续切换焦点时可能会出现视觉闪烁。如果需求是纯粹阻止输入，用 readonly 属性配合样式控制通常是更稳妥的办法。
focus 事件的实际应用场景
focus() 在日常开发中的使用频率很高，常见场景包括：
-
输入框提示文字： 获得焦点时显示格式要求或操作提示，失焦时隐藏。
-
自动选中内容： 获得焦点时用
select()方法自动全选输入框内容，方便用户直接覆盖输入。 -
样式高亮： 改变边框颜色或背景色，让用户清楚知道当前操作位置。
-
自动滚动到可视区域： 移动端开发中，输入框获得焦点时配合滚动，避免被键盘遮挡。
-
页面初始化默认焦点： 在搜索页面或登录页面加载完成后自动让输入框获得焦点，减少用户点击操作。
本节课程知识要点
-
focus()用于处理元素获得焦点的时刻，两种用法：不传参触发 focus，传回调函数绑定 focus。 -
与
blur()成对使用，构成完整的焦点进出管理机制。 -
主要应用于表单元素（
<input>、<select>、<textarea>）和链接（<a>）。 -
focus()配合blur()可实现“禁止输入”效果，但不如readonly属性语义清晰，需根据场景选用。 -
页面初始化时调用
focus()可设置默认焦点，提升常用功能的操作效率。
focus() 和 blur() 是一对互补的焦点事件方法，一个管进入，一个管离开。它们构成了 jQuery 表单交互的核心能力——从输入提示、实时校验到焦点管理，几乎所有的表单交互逻辑都围绕着这两个事件展开。把这两个方法的触发时机、配合方式理解透彻，写表单相关的交互代码会顺手很多，用户体验也会更流畅自然。
