首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何实现密码的显示和隐藏?

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

作者头像
用户7656790
发布2020-12-14 09:35:24
5.8K0
发布2020-12-14 09:35:24
举报

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

其实原理很简单:

通过点击事件将密码输入框的属性"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");
        }
    });
});

作者:古阙月

链接:http://m6z.cn/5w89kw

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-12-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 五角钱的程序员 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 步骤如下:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档