jquery聚焦事件
jQuery 聚焦事件的基本用法
jQuery 提供了多种方法处理元素的聚焦事件（focus event），主要用于表单元素或可聚焦的 HTML 元素（如 <input>、<textarea>、<select>）。以下是常见的聚焦事件方法：
1. focus() 方法
- 绑定事件：
.on('focus', handler) - 简写形式：
.focus(handler) - 触发事件：
.focus()
示例代码：
// 绑定聚焦事件
$('#myInput').on('focus', function() {
console.log('Input focused');
});
// 简写形式
$('#myInput').focus(function() {
$(this).css('border-color', 'blue');
});
// 触发聚焦事件（使元素获得焦点）
$('#triggerBtn').click(function() {
$('#myInput').focus();
});2. focusin() 方法
与 focus() 类似，但支持事件冒泡（父元素可以捕获子元素的聚焦事件）。
示例代码：
$('.form-group').focusin(function() {
$(this).addClass('active');
});聚焦事件的实际应用场景
表单验证提示
$('input[type="text"]').focus(function() {
$(this).next('.hint').fadeIn();
}).blur(function() {
$(this).next('.hint').fadeOut();
});自动全选文本
$('#searchBox').focus(function() {
this.select();
});动态样式变化
$('.form-control').focus(function() {
$(this).parent().addClass('focused');
}).blur(function() {
$(this).parent().removeClass('focused');
});注意事项
-
移动端兼容性：某些移动设备对
focus事件的支持可能不一致，建议配合touchstart事件使用。 -
事件委托：对于动态添加的元素，使用事件委托：
$(document).on('focus', '.dynamic-input', function() { // 处理逻辑 }); -
性能优化：避免在
focus事件中执行复杂 DOM 操作，可能影响页面响应速度。 -
与原生事件区别：jQuery 的
focus()是跨浏览器兼容的封装，解决了不同浏览器间的行为差异。
