jQuery中blur和focus事件的應用

一、需求原因

在填寫表單時需要實現如下效果

 

 

二、具體實現

<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">

<title>鼠標點擊後無文字,挪開鼠標後有文字</title>

<script language="JavaScript"src="../jQuery/jquery-1.7.1.min.js"></script>

<script type="text/javascript">

     $(function(){

         /*進入焦點時觸發*/

         $("#account").focus(function(){

              varoldValue = $(this).val();

              if(oldValue == this.defaultValue){

                  $(this).val("");

              }

         }); 

         /*失去焦點時觸發*/

         $("#account").blur(function(){

              alert("12");

              varoldValue = $(this).val();

              if(oldValue == ""){

                   $(this).val(this.defaultValue);

              }

         });

     });

</script>

</head>

<body>

          帳號:<input id="account"name="account" type="text" value="請輸入帳號">

</body>

</html>

 

摘自 gaolinwu的專欄

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *