“眨眼睛查看密码”工具类实现思路:
一、核心功能
实现点击眼睛图标切换密码明文/星号显示,提升表单输入体验。包含以下关键功能:
• 初始状态:密码框显示为星号,闭眼图标可见。
• 点击闭眼图标:切换为明文显示,睁眼图标可见。
• 点击睁眼图标:恢复星号显示,闭眼图标可见。
二、组件准备
- 两个输入框
•PasswordField
:默认显示星号的密码输入框。
•TextField
:显示明文的文本框(初始隐藏)。 - 两个图标控件
•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();}@FXMLprivate void initialize() {// 初始化时隐藏明文输入框和睁眼图标visiblePasswordField.setVisible(false);openEye.setVisible(false);closeEye.setVisible(true);}@FXMLpublic 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);}}
}