Javafx实现密码框可视

最新推荐文章于 2023-05-21 11:18:03 发布

漫路在线

最新推荐文章于 2023-05-21 11:18:03 发布

阅读量2.3k

点赞数 3

分类专栏： JavaFx 文章标签： java javafx gui html

本文链接：https://blog.csdn.net/realmels/article/details/108413721

版权

JavaFx 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

我们在做登录界面的时候，会用到密码框组件，其中一些会有密码的显示功能。
例如在Google浏览器的设置—>密码中就有这样的功能在这里插入图片描述

当我们按下小眼睛时我们的密码会变成可视，同时小眼睛的图标就会变成小眼睛加杠。如图
在这里插入图片描述
在前端中，我们可以轻松实现这种功能，代码如下
（要先准备两张图片，可自行保存)

前端代码如下

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        label {
            font-size: 20px;
        }
        input {
            height: 20px;
            border: 1px black solid;
            font-size: 10px;
        }
    </style>
</head>
<body>
<form action="#">
    <label for="user">账号:</label>
    <input type="text" id="user"><br><br>
    <label for="pass">密码:</label>
    <input type="password" id="pass">&nbsp;
    <img src="show.png" width="25px" style="vertical-align: middle" id="show" onclick="show_pwd()">
</form>
<script>
    function show_pwd() {
        var show_path="show.png";
        var noshow_path="noshow.png";
        var pwd_field=document.getElementById("pass");
        var show_btn=document.getElementById("show");
        var list=show_btn.src.split("/");
        var photo_path=list[list.length-1];
        if (photo_path==show_path){
            pwd_field.type="text";
            show_btn.src=noshow_path;
        }else {
            pwd_field.type="password";
            show_btn.src=show_path;
        }
    }
</script>
</body>
</html>

本人不是学前端的，写的不好请见谅

虽然代码写的比较垃圾，但也能实现我们所需的功能

那么，我们如何用javafx实现这种效果

在javafx中，我们的密码表示直接使用PasswordField，PasswordField继承了TextField的子类。

我们可以通过隐藏和显示的交替实现我们的效果

我们默认在窗口上显示一个PasswordField，在相同位置还有一个隐藏的TextField。当我们按下按钮时，隐藏PasswordField，显示TextField，并将PasswordField里的内容放到TextField里来。相反同理。

组件是否可视

我们可以通过setVisible方法来设置组件是否可视，传递的参数是一个布尔值。传递的参数为true则为可视，false则为不可视

例如

public void start(Stage primaryStage) throws Exception {
        AnchorPane root=new AnchorPane();

        Button b=new Button("button");
        b.setVisible(false);
        root.getChildren().add(b);

        Scene scene=new Scene(root);
        primaryStage.setScene(scene);
        primaryStage.setWidth(800);
        primaryStage.setHeight(800);
        primaryStage.show();
    }

这个时候运行结果是一个空白的窗口，里面什么都没有，因为按钮设置了setVisible为false，所以按钮被隐藏了

图片按钮

我们可以在构造按钮时给按钮添加图片

Image image1=new Image("file:show.png");
ImageView view=new ImageView(image1);
Button button=new Button("",view);

这样我们创建了一个带有图片的按钮

我们也可以用ImageView对象的getImage() 方法获取图片对象

还是上面的代码，加上一行

Image image1=new Image("file:show.png");
ImageView view=new ImageView(image1);
Button button=new Button("",view);
System.out.println(view.getImage()==image1);

此时这串代码便会输出true

代码如下

public void start(Stage primaryStage) throws Exception {
        AnchorPane root=new AnchorPane();

        PasswordField pwd_pield_1=new PasswordField();
        pwd_pield_1.setPrefWidth(200);
        pwd_pield_1.setPrefHeight(40);
        pwd_pield_1.setLayoutX(0);
        pwd_pield_1.setLayoutY(50);
        pwd_pield_1.setVisible(true);


        TextField pwd_pield_2=new TextField();
        pwd_pield_2.setPrefWidth(200);
        pwd_pield_2.setPrefHeight(40);
        pwd_pield_2.setLayoutX(0);
        pwd_pield_2.setLayoutY(50);
        pwd_pield_2.setVisible(false);


        Image image1=new Image("file:show.png");
        Image image2=new Image("file:noshow.png");
        ImageView view=new ImageView(image1);

        Button button=new Button("",view);
        button.setPrefWidth(40);
        button.setPrefHeight(40);
        button.setLayoutX(205);
        button.setLayoutY(50);
        button.setBackground(null);
        button.setBorder(null);
        button.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
                if (view.getImage()==image1){
                    String s=pwd_pield_1.getText();
                    pwd_pield_2.setVisible(true);
                    pwd_pield_2.requestFocus();
                    pwd_pield_2.setText(s);
                    pwd_pield_2.positionCaret(s.length());
                    pwd_pield_1.setVisible(false);
                    view.setImage(image2);
                }else {
                    String s=pwd_pield_2.getText();
                    pwd_pield_1.setVisible(true);
                    pwd_pield_1.requestFocus();
                    pwd_pield_1.setText(s);
                    pwd_pield_1.positionCaret(s.length());
                    pwd_pield_2.setVisible(false);
                    view.setImage(image1);
                }
            }
        });

        root.getChildren().add(pwd_pield_1);
        root.getChildren().add(pwd_pield_2);
        root.getChildren().add(button);


        Scene scene=new Scene(root);
        primaryStage.setScene(scene);
        primaryStage.setWidth(600);
        primaryStage.setHeight(600);
        primaryStage.show();
    }

小白代码，不喜勿喷

漫路在线

关注

3
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
Javafx实现密码框可视

我们在做登录界面的时候，会用到密码框组件，其中一些会有密码的显示功能。例如在Google浏览器的设置—>密码中就有这样的功能当我们按下小眼睛时我们的密码会变成可视，同时小眼睛的图标就会变成小眼睛加杠。如图在前端中，我们可以轻松实现这种功能，代码如下（要先准备两张图片，可自行保存)前端代码如下...
复制链接

扫一扫