仅居中文本字段的提示文本

Question

有没有办法可以使用CSS来集中JavaFX TextField的提示文本？我只是通过在提示文本前面放置空格来ad it but，但有时它仍然略微偏离。

[N ] http://i65.tinypic.com/i2kobl.png - ＆gt; [ N ] http://i66.tinypic.com/2mxr0jk.png

Answer 1

当文本字段为空且没有焦点时，文本字段中会显示提示文本。 focused有一个CSS伪类但是＃34;空＆＃34;没有预定义的CSS伪类，所以你需要创建一个：

TextField textField = new TextField();
textField.setPromptText("Enter something");

PseudoClass empty = PseudoClass.getPseudoClass("empty");

textField.pseudoClassStateChanged(empty, textField.getText().isEmpty());

textField.textProperty().isEmpty().addListener((obs, wasEmpty, isNowEmpty) -> 
        textField.pseudoClassStateChanged(empty, isNowEmpty));

现在，您可以按如下方式使用CSS在文本字段为空时将对齐设置为居中，并在文本字段为空且聚焦时将对齐设置为默认的中间左侧。

SSCCE：

import javafx.application.Application;
import javafx.css.PseudoClass;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class CenterPromptText extends Application {

    @Override
    public void start(Stage primaryStage) {
        TextField textField = new TextField();
        textField.setPromptText("Enter something");

        PseudoClass empty = PseudoClass.getPseudoClass("empty");

        textField.pseudoClassStateChanged(empty, textField.getText().isEmpty());

        textField.textProperty().isEmpty().addListener((obs, wasEmpty, isNowEmpty) -> 
                textField.pseudoClassStateChanged(empty, isNowEmpty));

        VBox root = new VBox(5, textField, new Button("OK"));
        Scene scene = new Scene(root);
        scene.getStylesheets().add("center-prompt-text.css");
        primaryStage.setScene(scene);
        primaryStage.show();

    }

    public static void main(String[] args) {
        launch(args);
    }
}

center-prompt-text.css：

.text-field:empty {
    -fx-alignment: center ;
}
.text-field:empty:focused {
    -fx-alignment: center-left ;
}

/*
 * settings on root just for cosmetic appearance;
 * 
 */

.root {
    -fx-padding: 20 ;
    -fx-alignment: center ;
}

当您专注于按钮时，会出现提示文字并居中：

如果您对文本字段进行聚焦，它将恢复为左对齐（因此光标显示在左侧）：

并且如果输入文本，则empty伪类未设置，因此无论是否聚焦，文本都是左对齐的：