JavaFx密码框明文/密文的切换

写课设的时候想实现的，发现参考资料挺少的（我觉得）。

基本思路：通过切换Label和Password框来实现密文和明文。

最终效果:

Fxml结构

<PasswordField fx:id="passwordField" onMouseClicked="#switchPasswordText" onMouseMoved="#changeCursor" prefHeight="18.0" prefWidth="164.0" promptText="请输入密码" text="root" GridPane.columnIndex="1" GridPane.rowIndex="1" />  
<TextField fx:id="displayFiled" onMouseClicked="#switchPasswordText" onMouseMoved="#changeCursor" prefHeight="30.0" prefWidth="62.0" promptText="请输入密码" visible="false" GridPane.columnIndex="1" GridPane.rowIndex="1" />

密码框样式

#passwordField, #displayFiled{  
-fx-background-repeat: no-repeat;  /*防止背景铺满*/
-fx-background-position: right 10 center;  
}  
/*设置背景*/
#passwordField{  
-fx-background-image: url("/image/hidden.png");  
}  
  
#displayFiled {  
-fx-background-image: url("/image/display.png");  
}

控制器

public void switchPasswordText(MouseEvent event) {

    Node source = (Node) event.getSource(); // 获取事件源

    double clickX = event.getX(); // 获取鼠标点击事件的X坐标

    double clickY = event.getY(); // 获取鼠标点击事件的Y坐标

    double fieldWidth = source.getLayoutBounds().getWidth();

    double fieldHeight = source.getLayoutBounds().getHeight();

    // 检测是否点击了最右边20像素的区域

    if (clickX >= fieldWidth - 20 && clickY >= 0 && clickY <= fieldHeight) {

        // 切换文本框和密码框的显示状态

        boolean isPasswordVisible = displayFiled.isVisible() | pwdView.isVisible();

        if (isPasswordVisible) {

            passwordField.setText(displayFiled.getText());

            passwordField.requestFocus();

            passwordField.positionCaret(displayFiled.getLength());

        } else {

            displayFiled.setText(passwordField.getText());

            displayFiled.requestFocus();

            displayFiled.positionCaret(passwordField.getLength());

        }

        displayFiled.setVisible(!isPasswordVisible);

        passwordField.setVisible(isPasswordVisible);

    }

}

参考资料（还有AI辅助） JavaFX | 解决 PasswordField 不包含显示密码功能的问题_passwordfiled-CSDN博客