使用 JavaFX 实现显示密码切换答案

【问题标题】：Implementing a show password toggle with JavaFX使用 JavaFX 实现显示密码切换
【发布时间】：2020-09-18 10:08:19
【问题描述】：

我想添加一个切换按钮，允许 PasswordField 显示写入的内容，因此我创建了一个 Textfield 和一个 PasswordField，它们共享 GridPane 中的位置，单击复选框将在两者之间切换。但是，问题是，当我按 Tab 从 Username TextField 导航到 PasswordField 时，它首先关注不可见的 TextField，然后我必须再次按 Tab。因此，总而言之，要从 Username TextField 导航到 PasswordField，我必须按 Tab 两次。 picture of GUI

JavaFX 中是否有一个函数可以让我更好地执行此操作？

这是我的代码：

控制器：

package sample;

import javafx.fxml.FXML;
import javafx.scene.control.CheckBox;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.scene.paint.Color;
import javafx.scene.text.Text;
import javafx.event.ActionEvent;


public class FXML_Login{

    String[] usernames = {"user", "user2", "user3"};
    String[] passwords = {"pass", "pass2", "pass3"};

    @FXML private Text loginText;
    @FXML private TextField username;
    @FXML private TextField passwordShown;
    @FXML private PasswordField passwordBullets;
    @FXML private CheckBox passToggle;

    @FXML protected void handleLoginSubmission(ActionEvent event){

        if(username.getText().equals(usernames[0]) && (passwordBullets.getText().equals(passwords[0])
                || passwordShown.getText().equals(passwords[0]))){

            loginText.setFill(Color.GREEN);
            loginText.setText("Login successful.");
        }

        else{
            loginText.setFill(Color.RED);
            loginText.setText("Login failed.");
        }
    }

    @FXML protected void togglePasswordVisible(ActionEvent event){

        if(passToggle.isSelected()){
            passwordShown.setText(passwordBullets.getText());
            passwordShown.setVisible(true);
            passwordBullets.setVisible(false);
            return;
        }

        passwordBullets.setText(passwordShown.getText());
        passwordBullets.setVisible(true);
        passwordShown.setVisible(false);
    }

    @FXML protected void initialize(){
    }
}

FXML：

<?import javafx.scene.control.CheckBox?>
<GridPane fx:controller="sample.FXML_Login"
          xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10"
          stylesheets = "/sample/styles.css">

    <Text id = "welcome"
          text="Welcome"
          GridPane.columnIndex="0"
          GridPane.rowIndex="0"
          GridPane.columnSpan="2"/>

    <Label text = "User Name: "
           GridPane.columnIndex="0"
           GridPane.rowIndex="1" />

    <TextField fx:id = "username"
               promptText = "Username"
               GridPane.columnIndex="1"
               GridPane.rowIndex="1"
               onAction="#handleLoginSubmission"/>

    <Label text = "Password: "
           GridPane.columnIndex="0"
           GridPane.rowIndex="2" />

    <TextField fx:id = "passwordShown"
               promptText = "Password"
               GridPane.columnIndex="1"
               GridPane.rowIndex="2"
               onAction="#handleLoginSubmission"/>

    <PasswordField fx:id = "passwordBullets"
                   promptText="Password"
                   GridPane.columnIndex="1"
                   GridPane.rowIndex="2"
                   onAction="#handleLoginSubmission"/>


    <Label text="Show password"
           GridPane.columnIndex="0"
           GridPane.rowIndex="3"/>

    <CheckBox fx:id="passToggle" onAction="#togglePasswordVisible"
              GridPane.columnIndex="1"
              GridPane.rowIndex="3"/>

    <HBox spacing="10"
          alignment="BOTTOM_RIGHT"
          GridPane.columnIndex="1"
          GridPane.rowIndex="4">
          <Button text="Sign In"
                  onAction="#handleLoginSubmission"/>
    </HBox>

    <Text fx:id = "loginText"
          GridPane.columnIndex="1"
          GridPane.rowIndex="6"/>



</GridPane>

【问题讨论】：

标签： java user-interface javafx fxml

【解决方案1】：

有一个名为“Focus Traversable”的选项可让您导航到它或不导航到它。

您只需要调用方法“setFocusTraversable(boolean b)”并切换复选框并根据您的需要使字段可遍历。

这是文档的link。

【讨论】：