在JFXTextField中与文本分开设置提示文本

Question

我正在使用JFoenix库元素。我有一个简单的登录界面。我使用带有LabelFloat选项的JFXTextfields。当文本字段为空时，提示文本权重是正常的。但是当文本字段未聚焦且非空时我需要将文本权重更改为粗体并且其大小增加，我还需要标签Float以保持th初始字体大小和正常权重。

这是我的css：

.input-field-blue {
    -fx-prompt-text-fill: #a1a1a1;
    -jfx-unfocus-color : #bcbcbc;
    -fx-background-repeat : no-repeat;
    -fx-background-position: right center;
    -fx-padding : 0 -8 4 0;
    -fx-text-fill : #3fc9ee;
}
.input-field-blue:filled {
    -fx-font-size: 14;
    -fx-font-weight: bold;
    -fx-text-fill : #00adde;
    -jfx-unfocus-color : #00adde;
}

这是我的fxml文件：

<AnchorPane fx:id="backPanel" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity"
            prefHeight="675.0" prefWidth="1200.0" stylesheets="@../sample/sylesheet.css"
            xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="View.LoginView">
    <children>
        <Pane fx:id="frontPanel" layoutX="396.0" layoutY="164.0" prefHeight="351.0" prefWidth="450.0"
              style="-fx-background-color: #ffffff;" styleClass="front-panel">
            <children>
                <Label fx:id="hiLabel" layoutX="166.0" layoutY="43.0" styleClass="title-blue" text="Bonjour !"
                       textAlignment="CENTER"/>
                <Label fx:id="highlightLabel" layoutX="115.0" layoutY="99.0" styleClass="highlight"
                       text="Veuillez vous authentifier s’il vous plaît"/>
                <JFXPasswordField fx:id="pwd" focusColor="#3fc9ee" labelFloat="true" layoutX="77.0" layoutY="207.0"
                                  prefHeight="26.0" prefWidth="297.0" promptText="Mot de passe" unFocusColor="#bcbcbc">
                    <styleClass>
                        <String fx:value="input-field-blue"/>
                    </styleClass>
                </JFXPasswordField>
                <JFXButton fx:id="authButton" layoutX="155.0" layoutY="277.0" prefHeight="38.0" prefWidth="140.0"
                           styleClass="button-blue" text="S'authentifier" textAlignment="CENTER"/>
                <JFXTextField fx:id="userName" focusColor="#3fc9ee" labelFloat="true" layoutX="76.0" layoutY="147.0"
                              prefHeight="26.0" prefWidth="297.0" promptText="Nom d'utilisateur" unFocusColor="#bcbcbc">
                    <styleClass>
                        <String fx:value="input-field-blue"/>
                    </styleClass>
                </JFXTextField>
            </children>
        </Pane>
    </children>
    <styleClass>
        <String fx:value="back-panel"/>
        <String fx:value="back-panel-blue"/>
    </styleClass>
</AnchorPane>

我有这个界面：

但我想要的是：

反正有吗？

Answer 1

您应该为css添加一个自定义类，并在焦点状态或长度状态发生变化时切换它。

将以下内容添加到您的css文件中：

.input-field-blue.not-empty-and-unfocused {
    -fx-font-weight: bold;
}

现在在你的控制器中添加一个checkState方法，它添加或删除not-empty-and-unfocused类。在lengthProperty方法中添加focusedProperty和initialize的监听器。这是控制器的重要部分：

public class LoginView implements Initializable {
    @FXML
    public JFXPasswordField pwd;
    @FXML
    public JFXTextField userName;

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        userName.lengthProperty().addListener((observable, oldValue, newValue) -> checkState(userName));
        userName.focusedProperty().addListener((observable, oldValue, newValue) -> checkState(userName));
        pwd.lengthProperty().addListener((observable, oldValue, newValue) -> checkState(pwd));
        pwd.focusedProperty().addListener((observable, oldValue, newValue) -> checkState(pwd));
    }

    private void checkState(TextField field) {
        if (field.isFocused() || field.getLength() == 0) {
            field.getStyleClass().remove("not-empty-and-unfocused");
        } else {
            field.getStyleClass().add("not-empty-and-unfocused");
        }
    }
}

编辑：

您可能要考虑的另一个选项是使用自定义PseudoClass。因此，您必须将您的CSS更改为以下内容：

.input-field-blue:not-empty-and-unfocused {
    -fx-font-weight: bold;
}

在您的Controller中，您创建一个Pseudo Class并稍微更改checkState方法：

private static final PseudoClass NOT_EMPTY_AND_UNFOCUSED = PseudoClass.getPseudoClass("not-empty-and-unfocused");

private void checkState(TextField field) {
    field.pseudoClassStateChanged(NOT_EMPTY_AND_UNFOCUSED, !(field.isFocused() || field.getLength() == 0));
}