JQuery中focus()與blur()焦點事件

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(" "); 
				});
			 });
效果:






發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章