文本框獲得焦點失去焦點變色

<html>

<head>

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

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>

<style>

 input:focus,textarea:focus{

    border:1px solid #f00;

    background:#fcc;

 }

 .focus{

    border:1px solid #f00;

    background:#fcc;

 }

</style>

<script>

  $(function(){

     $(":input").focus(function(){

      $(this).addClass("focus");

     }).blur(function(){

       $(this).removeClass("focus");

     });

    });

</script>

</head>

<body>

<form action="#" method="post" id="regForm">

  <fieldset>

    <legend>個人基本信息</legend>

    <div>

     <label for="username">名稱:</label>

     <input id="username" type="text" />

    </div>

    <div>

     <label for="pass">密碼:</label>

     <input type="password" id="pass" />

    </div>

    <div>

     <label for="msg">詳細信息:</label>

     <textarea id="msg"></textarea>

    </div>

  </fieldset>

</form>

</body>

</html>


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