javascript用户名和密码的案例

最新推荐文章于 2023-06-18 10:28:56 发布

愿做网络中的风滚草

最新推荐文章于 2023-06-18 10:28:56 发布

阅读量2.2k

点赞数 3

分类专栏： js 文章标签： javascript js

本文链接：https://blog.csdn.net/weixin_44182710/article/details/113546914

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin: 0;
        }
        .box{
            position: relative;
            margin: 100px auto;
            width: 600px;
        }
        img{
            position:absolute;
            top: -6px;
            right: 68px;
        }
        #account, #password{
            height: 30px;
            font-size: 15px;
            color:#999;
            outline:none;
        }
    

    </style>
</head>
<body>
    <div class="box">
        用户名：<input id = "account"  type="text" value="请输入用户名/手机号">
        密码：<input id="password" type="text" value="请输入密码">
        <img src="images/Open.png" alt="">
    </div>
    <script>
        var account = document.querySelector('#account');
        var password = document.querySelector('#password');
        var img = document.querySelector('img');
        var passwordFlag;                   //passwordFlag = 0 表示text passwordFlag = 1表示password
        var passwordOnclick = 0;             //当密码未输入时不允许点击 图片O查看密码
       /*  account.onfocus = function(){
            if(this.value == '请输入用户名/手机号'){
                this.value ='';
                this.style.color = '#333';
            }
            else{
                this.style.color = '#333';
            }
        }
        account.onblur = function(){
                if(this.value == ''){
                    this.value = '请输入用户名/手机号';
                    this.style.color = '#999';
                }else{
                    this.style.color = '#999';
                }
        } */
        password.onfocus = function(){
            passwordOnclick = 1;
            if(this.value = '请输入密码'|| this.value.length == 0 ){
                this.type = 'password';
                this.value = '';
                this.style.color = '#333';
                passwordFlag = 1;
                img.src = 'images/Open.png'
            }else{
                this.style.color = '#333';
            }
        }
        password.onblur = function(){
                if(this.value == ''){
                    this.type = 'text';
                    this.value = '请输入密码';
                    this.style.color = '#999';
                    passwordFlag = 0;
                }else{
                    this.style.color = '#999';
                }
        }
                               
        img.onclick = function(){
                if(passwordFlag == 0 && password.type == 'text' &&passwordOnclick == 1){//当点击过input密码框后便可以点击Open查看密码
                    passwordFlag = 1;
                    img.src = 'images/Open.png';
                    password.type = 'password';
                }else if(passwordFlag == 1 && password.type == 'password' && passwordOnclick == 1){
                    passwordFlag = 0;
                    img.src = 'images/Close.png';
                    password.type = 'text';
                }       
            }
                
    </script>
</body>
</html>

将下面的图片创建在根目录下以images命名
在这里插入图片描述
Close.png

Open.png

愿做网络中的风滚草

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
javascript用户名和密码的案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ pad
复制链接

扫一扫