登录页面的密码的显示与隐藏

最新推荐文章于 2024-03-12 16:58:51 发布

小花皮猪

最新推荐文章于 2024-03-12 16:58:51 发布

阅读量6k

点赞数 3

分类专栏：前端(Web) 文章标签：前端开发 JavaScript jQuery 密码显示图标切换

本文链接：https://blog.csdn.net/weixin_46713508/article/details/119996618

版权

前端(Web) 专栏收录该内容

44 篇文章 5 订阅

订阅专栏

原理就是点击的时候把密码的输入框的类型从password切换到text,再次点击把text切换成password,懒的话可以直接声明按钮点击,美观点的话可以去阿里icon官网上选几个使用

效果

在这里插入图片描述

选择喜欢的icon以png的形式下载到本地放在项目中引用即可

丰富的icon资源:https://www.iconfont.cn/

在这里插入图片描述

代码

<%--
  Created by IntelliJ IDEA.
  User: wx_weiyihe
  Date: 2021/8/30
  Time: 14:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<html>
<head>
    <title>Title</title>
</head>

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body{
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .kuang{
        position: relative;
        width: 380px;
        height: 60px;
        border-radius: 5px;
        /*  background-color: rgba(204, 197, 197,.5); */
        box-shadow: inset 5px 5px 10px rgba(204, 197, 197,.5),
        inset -5px -5px 8px rgba(204, 197, 197,.5);
    }
    .kuang input{
        position: absolute;
        top: 0;
        left: 20px;
        height: 100%;
        width: 300px;
        font-size: 18px;
        outline: none;
        border: none;
        background-color:transparent;
    }
    .kuang input::placeholder{
        color: rgba(68, 67, 67,.8);
    }
    .conceal{
        position: absolute;
        top: 15px;
        right: 15px;
        width: 30px;
        height: 30px;
        background-image: url(../image/open.png);
        background-size: 100% 100%;
        cursor: pointer;
    }
    .conceal.yincang{
        background-image: url(../image/close.png);
        background-size: 100% 100%;
    }
</style>

<body>
<div class="kuang">
    <input type="password" placeholder=" 请输入密码......" id='password' >
    <div class="conceal" id='conceal'></div>
</div>
<script>
    var password = document.getElementById('password');
    var anniu = document.getElementById('conceal');
    anniu.addEventListener('click',function(){
        if(password.type==='password')
        {
            password.setAttribute('type','text');
            anniu.classList.add('yincang');
        }else{
            password.setAttribute('type','password');
            anniu.classList.remove('yincang');
        }
    })
</script>
</body>



</html>

icon路径

在这里插入图片描述

引用

  background-image: url(../image/open.png);

小花皮猪

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录