JavaScript 密码输入框的显隐切换

最新推荐文章于 2025-05-27 09:09:27 发布

✪憑星月✪

最新推荐文章于 2025-05-27 09:09:27 发布

阅读量763

点赞数

CC 4.0 BY-SA版权

分类专栏：页面实现效果文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_61716556/article/details/124915709

页面实现效果专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在网页中实现密码输入框的显隐切换功能，通过更改输入框的type属性和图片切换来完成。用户点击小眼睛图标，可以显示或隐藏密码，方便核对。代码示例中，利用JavaScript监听按钮点击事件，动态修改图片源和输入框类型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

密码输入框我们常常可以见到显隐切换的小眼睛，点击可以将········转换为密码原文，便于核对。

实现这个小效果需要两个点

改变输入框的type(类型)
改变图片路径(只要实现切换图片即可，不一定非要切换路径)。

代码如下，图片素材可以在iconfont上下载图片或使用web字体。代码下附上实例中的图片。

<!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>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        div{
            width:500px;
            height:100px;
        }
        input{
            border: none;
            outline: none;
            float: left;
            border-bottom:1px solid #ccc;
            width:400px;
            height: 99px;
        }
        button{
            float: left;
            width: 100px;
            height:99px;
        }
        img{
            width:100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="box">
        <input type="text" name="" id="ipt">
        <button id="btn"><img src="./眼睛.png" id="img" alt=""></button>
    </div>
    <script>
        var ipt=document.getElementById("ipt");
        var img=document.getElementById("img");
        var btn=document.getElementById("btn");
        btn.onclick=function(){
            if(ipt.type=="text"){
                img.src="./闭眼睛.png";
                ipt.type="password";
            }
            else{
                img.src="./眼睛.png"
                ipt.type="text"
            }
        }
    </script>
</body>
</html>