当前位置: 首页 > news >正文

眨眼睛查看密码工具类

“眨眼睛查看密码”工具类实现思路:


一、核心功能

实现点击眼睛图标切换密码明文/星号显示,提升表单输入体验。包含以下关键功能:
• 初始状态:密码框显示为星号,闭眼图标可见。
• 点击闭眼图标:切换为明文显示,睁眼图标可见。
• 点击睁眼图标:恢复星号显示,闭眼图标可见。


二、组件准备

  1. 两个输入框
    PasswordField:默认显示星号的密码输入框。
    TextField:显示明文的文本框(初始隐藏)。
  2. 两个图标控件
    ImageView openEye:睁眼图标(初始隐藏)。
    ImageView closeEye:闭眼图标(初始显示)。

三、实现步骤

1. 初始化状态

隐藏明文框visiblePasswordField.setVisible(false)
显示密码框passwordField.setVisible(true)
图标状态:显示闭眼图标,隐藏睁眼图标。

2. 事件绑定

监听两个图标的点击事件:无论点击哪个图标,触发切换逻辑。

openEye.setOnMouseClicked(e -> handleOpenEye());
closeEye.setOnMouseClicked(e -> handleOpenEye());
3. 切换逻辑实现

判断当前显示状态:根据明文框是否可见决定下一步动作。

boolean isPasswordVisible = visiblePasswordField.isVisible();

切换到明文显示
• 将密码框内容复制到明文框:visiblePasswordField.setText(passwordField.getText())
• 显示明文框,隐藏密码框。
• 切换图标状态:显示睁眼,隐藏闭眼。
切换到星号显示
• 将明文内容复制回密码框:passwordField.setText(visiblePasswordField.getText())
• 显示密码框,隐藏明文框。
• 切换图标状态:显示闭眼,隐藏睁眼。


四、关键问题处理

文本同步:切换时同步内容,避免切换后数据不一致。
焦点管理:切换时保持输入焦点,避免用户需要重新点击输入框。
空值处理:确保null或空字符串时不会抛出异常。


五、优化建议

双向绑定(可选):
使用JavaFX属性绑定,实现两个输入框内容实时同步,避免手动复制。

visiblePasswordField.textProperty().bindBidirectional(passwordField.textProperty());

图标样式
添加CSS悬浮效果(如手指光标),提升用户体验。
输入监听
限制明文框的输入类型(如仅允许特定字符)。


六、使用示例

// 在FXML控制器中初始化工具类
ExchangeEyeTUtil eyeUtil = new ExchangeEyeTUtil(
    visiblePwdField, 
    passwordField, 
    openEyeIcon, 
    closeEyeIcon
);

总结:该工具类通过状态切换和事件监听,实现密码可见性控制,核心在于正确处理组件显示/隐藏状态及内容同步。开发者可结合具体需求进行扩展优化。

package com.example.demo6.util;

import javafx.fxml.FXML;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.scene.image.ImageView;

public class ExchangeEyeTUtil {
    private final TextField visiblePasswordField;
    private final PasswordField passwordField;
    private final ImageView openEye;
    private final ImageView closeEye;

    public ExchangeEyeTUtil(TextField visiblePasswordField, PasswordField passwordField, ImageView openEye, ImageView closeEye) {
        this.visiblePasswordField = visiblePasswordField;
        this.passwordField = passwordField;
        this.openEye = openEye;
        this.closeEye = closeEye;
        // 初始状态设置
        initialize();
    }


    @FXML
    private void initialize() {
        // 初始化时隐藏明文输入框和睁眼图标
        visiblePasswordField.setVisible(false);
        openEye.setVisible(false);
        closeEye.setVisible(true);
    }

    @FXML
    public void handleOpenEye() {
        // 判断当前是否显示明文
        boolean isPasswordVisible = visiblePasswordField.isVisible();

        if (isPasswordVisible) {
            // 切换到密码隐藏状态
            passwordField.setText(visiblePasswordField.getText());
            passwordField.setVisible(true);
            visiblePasswordField.setVisible(false);
            openEye.setVisible(false);
            closeEye.setVisible(true);
        } else {
            // 切换到明文显示状态
            visiblePasswordField.setText(passwordField.getText());
            visiblePasswordField.setVisible(true);
            passwordField.setVisible(false);
            openEye.setVisible(true);
            closeEye.setVisible(false);
        }
    }
}

相关文章:

  • Java Web从入门到精通:全面探索与实战(二)
  • 虚拟机上安装openEuler和openGauss数据库
  • 移动端六大语言速记:第9部分 - 并发与多线程
  • 自动驾驶---苹果又要造车了吗?
  • 【多模态mllm之audio encoder】openai whisper模型解析
  • 2025最新系统 Git 教程(三)
  • 【Project】高并发内存池
  • Qt 入门 4 之标准对话框
  • MySQL高可用性
  • WordPress超简洁的主题:果果CMS主题
  • LeetCode 3396.使数组元素互不相同所需的最少操作次数:O(n)一次倒序遍历
  • GEO, TCGA 等将被禁用?!这40个公开数据库可能要小心使用了
  • 250408_解决加载大量数据集速度过慢,耗时过长的问题
  • 在 macOS 上连接 PostgreSQL 数据库(pgAdmin、DBeaver)
  • 第十四届蓝桥杯大赛软件赛国赛C/C++研究生组
  • SVT-AV1学习-函数selfguided_restoration_fast_internal
  • 机器学习课堂7用scikit-learn库训练SVM模型
  • duckdb源码阅读学习路径图
  • 题目练习之map的奇妙使用
  • 计算机视觉算法实战——实例分割算法深度解析
  • 我的科学观|梅彦昌:科技创新关键在于能否跑得快,而不是有没有钱
  • 反犹、资金与抗议:特朗普的施压如何撕裂美国大学?|907编辑部
  • 王毅谈中拉论坛十年成果
  • 中国女足将于5月17日至6月2日赴美国集训并参加邀请赛
  • 继71路之后,上海中心城区将迎来第二条中运量公交
  • 专访|导演刘江:给谍战题材注入现实主义的魂