使用JavaFX实现显示密码切换

Question

我想添加一个切换按钮，以允许PasswordField显示书面内容，因此我创建了一个Textfield和一个PasswordField，它们共享GridPane中的位置，单击复选框将在两者之间切换。但是问题是，当我按Tab键从用户名TextField导航到PasswordField时，它首先聚焦于不可见的TextField，然后必须再次按Tab键。因此，总的来说，要从用户名文本字段导航到密码字段，我必须按两次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>

Answer 1

有一个名为“焦点遍历”的选项，可让您导航或不导航。

您只需要通过切换复选框来调用方法“ setFocusTraversable（boolean b）”，并根据需要使字段可遍历或不遍历。

这里是文档的link。