JQuery中focus()与blur()焦点事件

最新推荐文章于 2021-09-12 19:31:54 发布

落花流水6

最新推荐文章于 2021-09-12 19:31:54 发布

阅读量7.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/hero_cheng/article/details/52781329

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了JQuery中的focus()和blur()事件。focus()用于当元素获得焦点时触发，而blur()则在元素失去焦点时执行。通过示例代码展示了如何在HTML中应用这两个事件来实现特定的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.焦点事件focus()与blur()

focus：获取对象焦点触发事件；

$(function(){
   $("xxx").focus(function(){
        ............
   });
});

blur:失去对象焦点触发事件；

$(function(){
   $("xxx").blur(function(){
        ............
   });
});

2.代码示例

html脚本：

<body style="text-align:center;">
  总完成额：<input type="text" size="8px;" id="test1">
  目标完成额：<input type="text" size="8px;" id="test2">
  参与考核薪资：<input type="text" size="8px;" id="test3">
  应得考核薪资：<input type="text" size="8px;" id="test4">
</body>

js脚本：

 $(function(){
			 	
				//获取焦点事件触发
				$("#test4").focus(function(){
					//设置文本框背景颜色
					$("#test4").css("background-color","#FFFFCC");
					//获取总完成额
					var str=$("#test1").val();
					//获取目标完成额
					var str1=$("#test2").val();
					//获取参与考核薪资
					var str2=$("#test3").val();
					//获取应得考核薪资
					var str3=$("#test4").val();
					if(str/str1>=0.8){
						str3=str2;
					}
					else{
						str3=(str/str1)*str2;
					}
                    $("#test4").val(str3);
				
				});
				//失去焦点触发
				$("#test4").blur(function(){
					//设置文本框背景颜色
					$("#test4").css("background-color","#D6D6FF");
					//鼠标失去焦点时,清空文本框内容
					//$("#test3").val(" "); 
				});
			 });

效果：