网页用户登入界面——密码框案例

vastSky0

于 2023-02-01 22:25:45 发布

阅读量412

点赞数

分类专栏：前端文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/NEXT00/article/details/128841620

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

该文章展示了一个使用HTML、CSS和JavaScript编写的密码框示例，其中包含一个可点击的小眼睛图标，用户可以手动切换来查看或隐藏密码内容。CSS用于移除默认的密码显示按钮并美化输入框，JavaScript处理点击事件，动态改变密码类型和图标状态。

摘要由CSDN通过智能技术生成

自学写的一个简单的密码框案例，设置了一个小眼睛图标按钮用于手动查看当前密码内容：
Temp.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登入</title>
    <link rel="stylesheet" href="Temp.css">
</head>
<body>
    <div>
        <input id='text1' type="text" placeholder="用户名">
        <input id='text2' type="password" placeholder="密码">
        <!-- <button id="look">查看</button> -->
        <img id='eye' src="pic/眼睛_隐藏_o.png" alt="不可见" onclick="">
    </div> 
    <script src="Temp.js"></script>
</body>
</html>

Temp.css

/* 去掉密码框原有小眼睛 */
input[type="password"]::-ms-reveal{
    display:none
}
/* 简单修饰输入框和眼睛图标 */
input {
    display: inline-block;
}
#eye {
    position: absolute;
    margin-left: -20px;
    margin-top: 3px;
    height: 18px;
    display: inline-block;
    /* 便于定位 */
    /* border: 1px solid; */
}

Temp.js

// 对输入框和眼睛图标进行事件配置
var look=document.getElementById('eye');
var password=document.getElementById('text2');
look.onclick=function(){
    if(password.type=='password'){
        look.src='pic/眼睛_显示_o.png';
        password.type='text';
    }else{
        look.src='pic/眼睛_隐藏_o.png';
        password.type='password';
    }
}