文本框得到失去焦点

<html>
 
<head>
    <meta charset="utf-8">
    <style type="text/css">
        body
        {
            font:normal 12px/17px Arial;
        }
        fieldset
        {
            width:15em;
        }
        div
        {
            padding:2px;
        }
         
        input, textarea
        {
            width:12em;
            border:1px solid #f00;
        }
         
        .focus
        {
            border:1px solid #f00;
            background:#fcc;
        }
    </style>
     
    <!--   引入jQuery -->
    <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script>
        $(function(){
            $(":input").focus(function(){
                $(this).addClass("focus");
                if($(this).val() == this.defaultValue)
                {
                    $(this).val("");
                }
            }).blur(function(){
                $(this).removeClass("focus");
                if($(this).val() == "")
                {
                    $(this).val(this.defaultValue);
                }
            })
        })
    </script>
 
</head>
 
<body>
 
    <form>
        <fieldset>
            <legend>个人信息</legend>
            <div>
                <label for="username">名称:</label>
                <input id="username" type="text" value="lvhuizhen" />
            </div>
             
            <div>
                <label for="pass">密码:</label>
                <input id="pass" type="password" value="123456">
            </div>
             
            <div>
                <label for="msg">详细信息:</label>
                <textarea id="msg" rows="2" cols="20" >详细信息</textarea>
            </div>
        </fieldset>
    </form>
</body>
</html>


你可能感兴趣的:(文本框得到失去焦点)