📅 最后修改于: 2023-12-03 14:43:15.236000 🧑 作者: Mango
focus() 是 jQuery 中的一个事件方法，用于设置指定元素获取焦点。当设置元素获取焦点后，用户操作一般会集中在该元素上，例如可以通过键盘输入或执行一些操作。focus() 通常与 blur() 方法配合使用，后者用于移除元素的焦点。
focus() 方法的语法如下：
$(selector).focus(handler)
focus() 方法接受一个可选的 handler 参数，用于在元素获取焦点时触发自定义的事件处理函数。
下面是一个简单的示例，演示如何使用 focus() 方法：
<!DOCTYPE html>
<html>
<head>
<title>jQuery focus() 示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.input-wrapper {
margin-top: 20px;
}
.input-wrapper input {
padding: 10px;
}
.input-wrapper.focus-input input {
border-color: red;
}
</style>
</head>
<body>
<div class="input-wrapper">
<input type="text" id="inputField" placeholder="输入框" />
</div>
<script>
$(document).ready(function() {
$("#inputField").focus(function() {
$(this).parent().addClass("focus-input");
});
$("#inputField").blur(function() {
$(this).parent().removeClass("focus-input");
});
});
</script>
</body>
</html>
在上述示例中，我们给一个输入框添加了一个获取焦点时的事件处理函数。当输入框获得焦点时，其父元素将添加一个 CSS 类名 focus-input，以修改输入框的样式。
通过以上代码，运行页面后，当点击输入框时，输入框的边框将变为红色。当输入框失去焦点后，边框颜色恢复默认。
focus() 方法允许我们在特定的元素上设置获取焦点的事件处理函数。在实际开发中，我们可以利用该方法执行一些与焦点相关的操作，提升用户体验。