前言

Qt的QLineEdit有隐藏密码的功能，但我想实现的是：当鼠标指着一个小眼睛的时候就显示密码，移开就隐藏密码。在网上找了半天也没找到用Qt实现的相关方法，所以我决定自己写一个控件实现它。

一、遇到的问题

1. 怎么插入图片？直接继承QLineEdit能实现吗？
2. 要如何获取到鼠标指着图片的信号？
3. 怎么限制只能输入数字和限制输入位数？

二、解决方法

1、继承 QWidget ，定义一个 QLineEdit 和一个 QLabel 来合成控件

用 QLineEdit来放密码。

QLineEdit *lineEdit = new QLineEdit;
lineEdit->setEchoMode(QLineEdit::Password);  //隐藏密码

用 QLabel来放图片。（小眼睛图片可以自己在网上找）

QLabel *pngLabel = new QLabel;
pngLabel->setAlignment(Qt::AlignCenter);
pngLabel->setPixmap(QPixmap(":/images/eye.png").scaled(20, 20));

用 QFrame 来布局合成控件，并重新设置边框

QFrame *frame = new QFrame;
frame->setObjectName("framePassword");QStringList qss;
qss.append(QString("QFrame#framePassword{border:1px solid %1;}").arg(borderColor));
qss.append(QString("QLabel{min-width:15px;background-color:%1;}").arg(bgColor));
qss.append(QString("QLineEdit{background-color:%1;border:none;}").arg(bgColor));
frame->setStyleSheet(qss.join(""));//将控件按照横向布局排列
QHBoxLayout *layout = new QHBoxLayout(frame);
layout->setMargin(0);
layout->setSpacing(0);
layout->addWidget(lineEdit);
layout->addWidget(pngLabel);

2、用 installEventFilter() 将图片控件绑定到事件过滤器

安装事件过滤器

pngLabel->installEventFilter(this);

重写事件过滤

bool bbtPasswordEdit::eventFilter(QObject *watched, QEvent *event)
{switch (event->type()) {case QEvent::Enter:lineEdit->setEchoMode(QLineEdit::Normal);  //显示密码break;case QEvent::Leave:lineEdit->setEchoMode(QLineEdit::Password);//隐藏密码break;default:break;}return QWidget::eventFilter(watched, event);
}

3、输入限制

QRegExp regx("[0-9]+$");        // 限制只能输入数字
QValidator *validator = new QRegExpValidator(regx, lineEdit);
lineEdit->setValidator( validator );
lineEdit->setMaxLength(6);      // 限制只能输入6位

到这里，密码输入框就基本完成啦！

下面奉上完整代码：

bbtpasswordedit.h

#ifndef BBTPASSWORDEDIT_H
#define BBTPASSWORDEDIT_H#include <QWidget>
#include <QLabel>
#include <QLineEdit>
#include <QRegExpValidator>
#include <QValidator>
#include <QRegExp>
#include <QVBoxLayout>
#include <QHBoxLayout>
#include <QEvent>
#include <QDebug>class bbtPasswordEdit : public QWidget
{Q_OBJECT
public:explicit bbtPasswordEdit(QWidget *parent = 0);QString text() const;void setFont(const QFont &font);protected:bool eventFilter(QObject *watched, QEvent *event);private:QLineEdit *lineEdit;
};#endif // BBTPASSWORDEDIT_H

bbtpasswordedit.cpp

#include "bbtpasswordedit.h"// 密码编辑框控件
// 鼠标指着pngLabel显示密码，离开隐藏密码bbtPasswordEdit::bbtPasswordEdit(QWidget *parent) : QWidget(parent)
{QString bgColor = "#FFFFFF";    //背景颜色QString borderColor = "#A6B5B8";//边框颜色QLabel *pngLabel = new QLabel;pngLabel->setAlignment(Qt::AlignCenter);pngLabel->setPixmap(QPixmap(":/images/eye.png").scaled(20, 20));lineEdit = new QLineEdit;lineEdit->setObjectName("lineEdit");lineEdit->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);QRegExp regx("[0-9]+$");        // 限制只能输入数字QValidator *validator = new QRegExpValidator(regx, lineEdit);lineEdit->setValidator( validator );lineEdit->setMaxLength(6);      // 限制只能输入6位lineEdit->setEchoMode(QLineEdit::Password);pngLabel->installEventFilter(this);QFrame *frame = new QFrame;frame->setObjectName("framePassword");QStringList qss;qss.append(QString("QFrame#framePassword{border:1px solid %1;}").arg(borderColor));qss.append(QString("QLabel{min-width:15px;background-color:%1;}").arg(bgColor));qss.append(QString("QLineEdit{background-color:%1;border:none;}").arg(bgColor));frame->setStyleSheet(qss.join(""));//将控件按照横向布局排列QHBoxLayout *layout = new QHBoxLayout(frame);layout->setMargin(0);layout->setSpacing(0);layout->addWidget(lineEdit);layout->addWidget(pngLabel);QVBoxLayout *verticalLayout = new QVBoxLayout(this);verticalLayout->setMargin(0);verticalLayout->setSpacing(0);verticalLayout->addWidget(frame);
}bool bbtPasswordEdit::eventFilter(QObject *watched, QEvent *event)
{switch (event->type()) {case QEvent::Enter:lineEdit->setEchoMode(QLineEdit::Normal);break;case QEvent::Leave:lineEdit->setEchoMode(QLineEdit::Password);break;default:break;}return QWidget::eventFilter(watched, event);
}void bbtPasswordEdit::setFont(const QFont &font)
{lineEdit->setFont(font);
}QString bbtPasswordEdit::text() const
{return lineEdit->text();
}

看似很复杂，其实就是这么简单！

效果图：

Qt实现密码输入框隐藏密码_小眼睛显示密码功能相关推荐

input输入密码类型，点击小眼睛显示密码或隐藏功能
一般的登录输入密码类型的,都会用一张图片点击查看密码,我遇到了这样的功能,所以就记下来了. <div class="pwd label"><div class=& ...
Uni App-----之u-input（密码明文小眼睛切换）
本文作为临时记录使用. 前言 : 最近做注册和忘记密码功能,需要写到小眼睛显示密码是否明文展示.出现的问题是在pc上正常实现效果,在手机端不生效. 解决思路: H5 暂未支持动态切换,请使用 v-if ...
JS实现密码框小眼睛的显示与隐藏(使用字体图标)
JS实现密码框小眼睛的显示与隐藏(使用字体图标) 前端学习路上的小练习,如若不喜,请勿喷. 眼睛使用的是 iconfont 阿里矢量图标库的内容链接:https://www.iconfont.cn/ ...
Element的input密码框小眼睛（点击眼睛显示密码,再次点击图标隐藏密码）
一.知识点: 带 icon 的输入框,可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标,也可以通过 slot 来放置图标. 因为图标涉及点击 ...
在ie edge中消除默认出现的密码框小眼睛标志
在ie edge中消除默认出现的密码框小眼睛标志 <style>/*去除ie edge的密码框默认出现的小眼睛给人添乱这一块,巨硬从来都没让我失望过*/input[type="p ...
浏览器兼容：在ie edge中消除默认出现的密码框小眼睛标志
在ie edge中消除默认出现的密码框小眼睛标志 <style>/*去除ie edge的密码框默认出现的小眼睛给人添乱这一块,巨硬从来都没让我失望过*/input[type="p ...
JS(JavaScript)入门设置密码框中点击小眼睛显示隐藏所输入的密码！
表单中点击小眼睛显示隐藏密码框中的密码! 准备: 1.两张png图片,一张睁眼,一张闭眼,可以到阿里巴巴矢量图库寻找(免费下载) 网站链接 https://www.iconfont.cn/ 最终效果图 ...
实现密码框小眼睛效果
点击眼睛显示密码,再次点击图标隐藏密码,需要变化的图标样式和input的显示方式. 效果: 代码: <!DOCTYPE html> <html><head>< ...
js实现密码输入框点击小眼睛显示或隐藏密码
登录页密码框加密输入不知道对错,加个小眼睛方便查看和修改,下面是小眼睛效果图,如果不喜欢这个图标可以自己去阿里图标库自己选择下载. html代码(因为只把密码输入框展示出来了,所以样式自行调整,只给你 ...

Qt实现密码输入框隐藏密码_小眼睛显示密码功能

目录

前言