利用JS实现密码的显示隐藏

最新推荐文章于 2026-05-12 13:51:35 发布

原创最新推荐文章于 2026-05-12 13:51:35 发布 · 2.1k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

当前文章被收录于：

前端

19 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了一个简单的HTML和JavaScript实现，用于在输入框中切换密码的可见性。通过使用input元素和img元素，结合简单的JS代码，可以实现在显示和隐藏密码之间的切换。

如图所示，想要实现下边的功能怎么办？其实很简单。。。

HTML代码如下（注意：需要给input和img各取一个id，并且在css中把样式定位好）

 <input type="password" class="form-control" id="oldpassword"  placeholder="请输入旧密码">
 <img src="../../img/showpassword.png" alt="" id="show" onclick="hideShowPsw() ">

JS代码如下（要准备好俩张图片，分别是显示密码，隐藏密码）

<script type="text/javascript">
    //获取input框内的切换图片id和input文本框的id
    var img = document.getElementById("show");
    var input = document.getElementById("oldpassword");
    function hideShowPsw() {
        if (input.type == "password") {
            input.type = "text";
            img.src ="../../img/showpassword.png";
        } else {
            input.type = "password";
            img.src = "../../img/closepassword.png";
        }
    }
</script>

彩蛋：