密码的明文和密文显示

密码的明文和密文显示,在HTML中给两个input标签,一个input标签的类型为password,另一个input标签的类型为text,type="Password"的input标签为密文,type="text"的input标签为明文,先把type="text"的input标签给上一个样式属性style="display:none;"隐藏此input标签,只让一个标签显示出来

<input type="Password" name="UserPassword" id="UserPassword" class="form-control-zd mima_dd icon-zd" placeholder="操作员密码" value="@ViewBag.UserPassword" />
<input type="text" name="userPassword" id="userPassword" class="form-control-zd mima_wz icon-zd" style="display:none;" placeholder="操作员密码" value="@ViewBag.UserPassword" />

在input标签的同级当中的一个div里给一个自定义属性,并给这个自定义赋值,这个自定义属性用来判断当前input标签为明文还是密文
在这里插入图片描述
使用class获取到有自定义属性的div,给这个div一个点击事件,判断当前这个自定义属性的值是多少,如果这个自定义属性的值为1则input标签的type="text"为明文,自定义属性的值为2则input标签的type="Password"为密文。div获得点击事件首先判断这个自定义的值,值为1,那么把这个自定义的值重新赋值为2,如果值为2,那么把这个自定义的值重新赋值为1。当值为1的时候,获取这个div的父元素div的子元素类为mima_dd的input标签隐藏起来,类为mima_wz的input标签显示出来(既密文隐藏明文显示),然后把当前输入input标签输入框的值赋值回填到类为mima_dd(既显示出来的密文input标签),然后返回;当值为2的时候,获取这个div的父元素div的子元素类为mima_wz的input标签隐藏起来,类为mima_dd的input标签显示出来(既明文隐藏密文显示),把当前输入input标签输入框的值赋值回填到类为mima_wz(既显示出来的明文input标签)然后返回。两个input的不管怎么切换,input标签里输入的值都是相互赋值的,永远都是当前输入的值,也永远都相同。

$(".input-group-append").click(function () {
                if ($(this).attr("data-show") == 1) {//明文
                    $(this).attr("data-show", "2");
                    $(this).parent("div").children(".mima_dd").hide();
                    $(this).parent("div").children(".mima_wz").show();
                    $(this).parent("div").children(".mima_wz").val($(this).parent("div").children(".mima_dd").val());
                    return;
                }
                if ($(this).attr("data-show") == 2) {//密文
                    $(this).attr("data-show", "1");
                    $(this).parent("div").children(".mima_dd").show();
                    $(this).parent("div").children(".mima_wz").hide();
                    $(this).parent("div").children(".mima_dd").val($(this).parent("div").children(".mima_wz").val());
                    return;
                }
            })
可以使用MFC的对话框控件来实现用户名密码窗口的添加。具体步骤如下: 1. 在Visual Studio创建一个MFC应用程序,选择对话框为主窗口。 2. 在资源视图添加一个对话框,设置好对话框的布局和控件。 3. 在代码添加对话框类的声明和实现文件,将对话框类作为主窗口类的成员变量。 4. 在主窗口类的OnInitDialog()函数初始化对话框类,并将其显示出来。 在实现密码明文密文切换时,可以使用MFC的编辑框控件和复选框控件。具体步骤如下: 1. 在对话框添加一个编辑框控件和一个复选框控件。 2. 在编辑框的属性设置密码风格,使其在输入时显示为星号。 3. 在复选框的属性设置默认值为未选。 4. 在代码添加复选框控件的响应函数,根据复选框的状态来切换编辑框的密码风格。 下面是一个简单的示例代码: // 声明对话框类 class CLoginDlg : public CDialogEx { DECLARE_DYNAMIC(CLoginDlg) public: CLoginDlg(CWnd* pParent = nullptr); // 标准构造函数 virtual ~CLoginDlg(); // 对话框数据 #ifdef AFX_DESIGN_TIME enum { IDD = IDD_LOGIN_DIALOG }; #endif protected: virtual void DoDataExchange(CDataExchange* pDX); // DDX/DDV 支持 DECLARE_MESSAGE_MAP() private: CEdit m_editUsername; // 用户名编辑框控件 CEdit m_editPassword; // 密码编辑框控件 CButton m_checkShowPassword; // 显示密码复选框控件 public: CString m_strUsername; // 用户名字符串 CString m_strPassword; // 密码字符串 BOOL m_bShowPassword; // 是否显示密码 }; // 实现对话框类 CLoginDlg::CLoginDlg(CWnd* pParent /*=nullptr*/) : CDialogEx(IDD_LOGIN_DIALOG, pParent) { m_bShowPassword = FALSE; } CLoginDlg::~CLoginDlg() { } void CLoginDlg::DoDataExchange(CDataExchange* pDX) { CDialogEx::DoDataExchange(pDX); DDX_Control(pDX, IDC_EDIT_USERNAME, m_editUsername); DDX_Control(pDX, IDC_EDIT_PASSWORD, m_editPassword); DDX_Control(pDX, IDC_CHECK_SHOW_PASSWORD, m_checkShowPassword); } BEGIN_MESSAGE_MAP(CLoginDlg, CDialogEx) ON_BN_CLICKED(IDC_CHECK_SHOW_PASSWORD, &CLoginDlg::OnBnClickedCheckShowPassword) END_MESSAGE_MAP() // 对话框类的OnInitDialog()函数 BOOL CMainFrame::OnInitDialog() { CDialogEx::OnInitDialog(); // 初始化登录对话框 m_loginDlg.Create(IDD_LOGIN_DIALOG, this); m_loginDlg.ShowWindow(SW_SHOW); return TRUE; } // 复选框控件的响应函数 void CLoginDlg::OnBnClickedCheckShowPassword() { m_bShowPassword = m_checkShowPassword.GetCheck(); if (m_bShowPassword) m_editPassword.SetPasswordChar(0); // 显示密码 else m_editPassword.SetPasswordChar('*'); // 隐藏密码 }
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值