登录password可见不可见实现方法

第一种
这里写图片描述


<!DOCTYPE html>
<html encoding="utf-8">
<head>
    <style>
    *{margin:0;padding:0}
    input{font:14px Monospace;height:20px;width:160px;}
    label{display:inline-block;width:100px;height:20px;}
    #pass{position:absolute;left:100px;top:0;opacity:0;filter:alpha(opacity=0);z-index:2;}
    form{position:relative;}
    #hint_pass{position:absolute;left:100px;}
    </style>
</head>
<body>
    <form>
        <label>Password:</label>
        <input type="text" id="hint_pass" maxlength="20" tabindex="-1" />
        <input type="text" id="pass" name="pass" maxlength="20" />
    </form> 
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script>
    var pass=document.getElementById('pass');
    var hint_pass=document.getElementById('hint_pass');
    pass.onkeyup=pass.onchange=function(){hint_pass.value=pass.value.replace(/./g,'*');};
</script>   
</body>
</html>

第二种登录可见密码实现
这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
body{
    margin:0px;  
    background-color: white; 
    font-family: 'PT Sans', Helvetica, Arial, sans-serif;  
    text-align: center;  
    color: #A6A6A6;  
}
/*输入框样式，去掉背景阴影模仿原生应用的输入框*/
input{
width: 100%;  
height: 50px;  
border:none;  
padding-left:3px;  
font-size: 18px;  
}
input:focus {  
    outline: none;  
}
/*显示隐藏密码图片*/
img{
width: 40px;
height: 25px;
position: absolute;  
right: 0px; 
margin: 15px;  
}
/*登录按钮*/
button{  
    width: 200px;  
    height: 50px;  
    margin-top: 25px;  
    background: #1E90FF;  
    border-radius: 10px;  
    border:none;
    font-size: 18px;
    font-weight: 700;  
    color: #fff;
}
button:hover {
background: #79A84B;  
outline: 0;
}
/*输入框底部半透明横线*/
.input_block {
    border-bottom: 1px solid rgba(0,0,0,.1);
}
/*container*/
#page_container{
    margin: 50px;
}
</style>
</head>
<body>
    <div id="page_container">
    <!--暗文密码输入框-->
    <div class="input_block" id="psw_invisible">
        <img id="visible" onclick="showPsw()" src="visible.png">
        <input type="password" id="input_invisible" placeholder="Password"/>
    </div>
    <!--明文密码输入框-->
    <div class="input_block" id="psw_visible" style="display: none;">
        <img id="invisible" onclick="hidePsw()" src="invisible.png">
        <input type="text" id="input_visible" placeholder="Password"/>
    </div>

    <button onclick="">Login</button>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript">
    // 这里使用最原始的js语法实现，可对应换成jquery语法进行逻辑控制
    var visible=document.getElementById('psw_visible');//text block
    var invisible=document.getElementById('psw_invisible');//password block
    var inputVisible = document.getElementById('input_visible');
    var inputInVisible = document.getElementById('input_invisible');
    //隐藏text block，显示password block
    function showPsw(){
        var val = inputInVisible.value;//将password的值传给text
        inputVisible.value = val;
        invisible.style.display = "none";  
        visible.style.display = "";  
    }
    //隐藏password，显示text  
    function hidePsw(){
        var val=inputVisible.value;//将text的值传给password  
        inputInVisible.value = val; 
        invisible.style.display = "";  
        visible.style.display = "none";  
    }
</script>
</body>
</html>

对第二种，html、js改进

<body>
    <textarea type="password"></textarea>
    <div id="page_container">
    <!--密码输入框-->
    <div class="input_block">
        <img id="demo_img" onclick="hideShowPsw()" src="visible.png">
        <input type="password" id="demo_input" placeholder="Password"/>
    </div>
    <button onclick="">Login</button>
</div>

<script type="text/javascript">
    // 这里使用最原始的js语法实现，可对应换成jquery语法进行逻辑控制
    var demoImg = document.getElementById("demo_img");
    var demoInput = document.getElementById("demo_input");
    //隐藏text block，显示password block
    function hideShowPsw(){
        if (demoInput.type == "password") {
            demoInput.type = "text";
            demo_img.src = "invisible.png";
        }else {
            demoInput.type = "password";
            demo_img.src = "visible.png";
        }
    }
</script>
</body>
</html>

登录password可见不可见实现方法

猜你喜欢