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

Question

有没有办法可能使用CSS来居中JavaFX TextField的提示文本？我只是通过在提示文本前面放置空格来对其进行ad,但有时它仍然略微偏离.

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

Answer 1

当文本字段为空且没有焦点时,文本字段中会显示提示文本.有一个CSS伪类focused但是没有预定义的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则取消设置伪类,因此无论是否聚焦,文本都是左对齐的: