如何实现密码的显示和隐藏？

本文链接：https://blog.csdn.net/Qizhi_Hu/article/details/104348688

如图所示，我们在登录账号的时候经常会看到密码的显示和隐藏是可以进行切换的，那么到底怎么实现这个功能呢？

在这里插入图片描述

其实原理很简单：
通过点击事件将密码输入框的属性"password"改为"text"属性，即可实现密码的显示；
同理，将"text"属性改回"passowrd"属性即可实现密码的重新隐藏。

步骤如下：

1.先准备两张图片，放置到你想放置的文件夹（或者你也可以写一个button按钮）
在这里插入图片描述

2.导入jquery的.js文件

<script type="text/javascript" src="/Scripts/jquery-1.7.min.js"></script>

3.开撸代码：

<span>密码:</span><input id="pwd" type="password" name="password" class="text" />
<img src="/images/eyes/open.jpg" width="30" height="30">

$(function () {

    // 通过点击事件实现密码的显示或隐藏功能
    $("#pwd").next().click(function () {
        // 通过id选择器获取当前输入框的属性
        var type = $("#pwd").attr("type");
        /**
         * 若当前属性为“password”,则切换图片，并修改属性为“text”，实现密码的显示功能
         * 若当前属性为“text"，同样切换图片，并修改属性为”password",实现密码的再次隐藏功能
         */
        if(type == "password"){
            $("#pwd").next().attr("src","/images/eyes/close.jpg");
            $("#pwd").next().css({"width":"30", "height":"30"});
            $("#pwd").prop("type", "text");
        }else {
            $("#pwd").next().attr("src","/images/eyes/open.jpg");
            $("#pwd").next().css({"width":"30", "height":"30"});
            $("#pwd").prop("type", "password");
        }
    });
});