您现在的位置:首页 >> 前端 >> 内容

密码框显示提示文字

时间:2013/8/30 10:23:55 点击:

  核心提示:htmlheadtitle登录/titlescript type=text/ src=./jquery-1.3.2.min.js/scriptscript$(document).ready(funct...
<html>  
<head>  
    <title>登录</title>  
    <script type="text/javascript" src="./jquery-1.3.2.min.js"></script>  
    <script>  
        $(document).ready(function(){  
            $(".text_login").focus(function(){  
                if($(this).val()=='user name' || $(this).val()=='password'){  
                    $(this).val('');  
                }  
                if($(this).attr('id')=='password1'){  
                    $(this).hide();  
                    $('#password2').show();  
                    $('#password2').focus();  
                }  
            });  
            $(".text_login").blur(function(){  
                if($(this).attr('id')=='password2' && $(this).val()==''){  
                    $(this).hide();  
                    $('#password1').show();  
                    $('#password1').val('password');  
                }  
                else if($(this).attr('id')=='uname' && $(this).val()=='' ){  
                    $(this).val('user name');  
                }  
            });  
        });  
    </script>  
</head>  
  
<body>  
    <table cellpadding="0" cellspacing="0" class="tb_login" border="0">   
        <tr>   
            <td> 账号:</td>  
            <td>   
                <input type="text" name="uname" value="user name"  id="uname" class="text_login"/>   
            </td>   
        </tr>  
        <tr>   
            <td> 密码:</td>   
            <td>  
                <input type="text" value="password" id="password1" class="text_login"/>  
                <input type="password"  id="password2" style="display:none;" class="text_login"/>  
            </td>   
        </tr>   
    </table>  
</body>  
</html>  

 

作者:网络 来源:不详