jquery 登陆窗口用户名、密码显示提示框

最新推荐文章于 2021-10-20 22:11:23 发布

格桑花

最新推荐文章于 2021-10-20 22:11:23 发布

阅读量6.4k

点赞数 1

本文链接：https://blog.csdn.net/HJ850126/article/details/28880763

版权

<html>
<head>
    <title>登录</title>
    <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(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>