onBlur事件与onfocus事件（js）

最新推荐文章于 2025-06-06 09:17:29 发布

原创最新推荐文章于 2025-06-06 09:17:29 发布 · 1.6k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

本文深入讲解了jQuery中blur和onfocus事件的使用方法，包括如何触发blur事件，以及如何将函数绑定到blur事件上，同时提供了实例代码，展示了如何在元素失去焦点时执行特定操作。

jQuery 参考手册 - 事件

一、jQuery的 onBlur方法

定义和用法

1、当元素失去焦点时发生 blur 事件。

2、blur() 函数触发 blur 事件，或者如果设置了 function 参数，该函数也可规定当发生 blur 事件时执行的代码。

提示：早前，blur 事件仅发生于表单元素上。在新浏览器中，该事件可用于任何元素。

触发 blur 事件

触发被选元素的 blur 事件。

将函数绑定到 blur 事件

规定当被选元素的 blur 事件发生时运行的函数。

语法:

$(selector).blur(function)

在这里插入图片描述
二、onfocus 事件

定义和用法

onfocus 事件在对象获得焦点时发生。

语法:

onfocus="SomeJavaScriptCode"

在这里插入图片描述 实例：

//当光标从"身份证号"框移开时，根据输入的身份证号获取出生日期、年龄、性别
$("#idCard").blur(function(){
	//出生日期
	$("#birthday").datebox('setValue',getDate(interceptBirthday()));    
	//年龄，调用根据出生日期获取年龄的方法
	$("#age").val(jsGetAge($("#birthday").datebox('getValue')));
	//性别
	if (interceptSex() == 0) {
		$("#sex").combobox('setValue',0)
	}else{
		$("#sex").combobox('setValue',1)
	}     
 });