仅当用户开始键入时才清除JavaFX TextField中的提示文本

Question

默认行为是字段中的提示文本在字段被聚焦时被擦除。这是当标记在字段中时。

是否可以配置文本字段，以便仅在用户开始键入时删除提示文本？

否则，我需要在每个文本字段旁边/上方添加一个标签，以描述其中的值。

Answer 1

您可以配置“-fx prompt text fill”键。文本字段：聚焦“类区域输入”。“文本字段”区域（css）：

`.text-field {
    -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
}
.text-field:focused {
    -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
}`

并在fxml文件中添加“PrompText”条目：

<TextField fx:id="XY_Id" promptText="First name">

这就是全部，对我来说很有用。

Answer 2

我知道它有点旧，但我自己也需要它，这仍然非常相关
我将完成jewelsea的回答，并给出一个更简单的解决方案。

显然，这是Java（FX）的默认行为（只有当用户开始输入时，TextField中的提示文本才会被清除）。
但是，在JIRA系统中收到请求（或错误报告）后，
Java改变了这种行为（并默认在TextField获得焦点时清除文本）。

您可以在此处查看此错误报告。

要回到旧的默认值（和更好的行为IMO），您需要做的就是添加以下代码行。

如果您的应用程序接口是使用适当的Java代码编写的。

Java代码：

textField.setStyle("-fx-prompt-text-fill: derive(-fx-control-inner-background, -30%);");

其中，文本字段是您的文本字段组件。

如果您的应用程序界面是使用FXML和CSS编写的，请将以下内容添加到CSS文件中。

JavaFX FXML（CSS）：

.text-input, .text-input:focused {
    -fx-prompt-text-fill: derive(-fx-control-inner-background, -30%);
}

目前这是默认行为（文本字段获得焦点时，文本字段的提示文本被清除），因此无需html" target="_blank">执行任何操作即可获得此行为，
但如果Java决定返回到键入时清除的行为，并且您希望获得焦点时清除的行为，则以下方法：

对于正确的Java代码，这有点棘手，因为您不能直接定义伪类的行为。

Java代码（使用绑定）：

textField.styleProperty().bind(
        Bindings
        .when(textField.focusedProperty())
            .then("-fx-prompt-text-fill: transparent;")
            .otherwise("-fx-prompt-text-fill: derive(-fx-control-inner-background, -30%);"));

或-

Java代码（使用事件）：

textField.focusedProperty().addListener(new ChangeListener<Boolean>() {
    @Override
    public void changed(ObservableValue<? extends Boolean> observable, Boolean oldValue, Boolean newValue) {
        if (newValue) {
            textField.setStyle("-fx-prompt-text-fill: transparent;");
        } else {
            textField.setStyle("-fx-prompt-text-fill: derive(-fx-control-inner-background, -30%);");
        }
    }
});

JavaFX FXML CSS：

将以下内容添加到CSS文件中。

.text-input {
    -fx-prompt-text-fill: derive(-fx-control-inner-background, -30%);
}

.text-input:focused {
    -fx-prompt-text-fill: transparent;
}

希望这有助于...

Answer 3

解决方案

此示例将允许JavaFX中的TextFields，其提示行为是在字段为空时显示提示，即使字段具有焦点。该解决方案是自定义CSS和自定义TextField类的组合，后者处理TextField的CSS样式。

persistent-prompt.css

.persistent-prompt:focused {
    -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
}
.no-prompt {
    -fx-prompt-text-fill: transparent !important;
}

PersistentPrompTextField。Java语言

import javafx.scene.control.TextField;

public class PersistentPromptTextField extends TextField {
    PersistentPromptTextField(String text, String prompt) {
        super(text);
        setPromptText(prompt);
        getStyleClass().add("persistent-prompt");
        refreshPromptVisibility();

        textProperty().addListener(observable -> refreshPromptVisibility());
    }

    private void refreshPromptVisibility() {
        final String text = getText();
        if (isEmptyString(text)) {
            getStyleClass().remove("no-prompt");
        } else {
            if (!getStyleClass().contains("no-prompt")) {
                getStyleClass().add("no-prompt");
            }
        }
    }

    private boolean isEmptyString(String text) {
        return text == null || text.isEmpty();
    }
}

提示转换器。Java语言

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

public class PromptChanger extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        TextField textField1 = new PersistentPromptTextField("", "First name");
        TextField textField2 = new PersistentPromptTextField("", "Last name");

        VBox layout = new VBox(
                10,
                textField1,
                textField2
        );
        layout.setPadding(new Insets(10));

        Scene scene = new Scene(layout);
        scene.getStylesheets().add(
                getClass().getResource(
                        "persistent-prompt.css"
                ).toExternalForm()
        );
        stage.setScene(scene);
        stage.show();
    }

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

JavaFX 8中当前如何实现提示处理

JavaFX 8（modena.CSS）用于控制提示文本的默认CSS如下所示：

.text-input {
    -fx-prompt-text-fill: derive(-fx-control-inner-background,-30%);
}
.text-input:focused {
    -fx-prompt-text-fill: transparent;
}

这将使提示文本在聚焦某个字段时透明，即使该字段中没有数据。

与HTML相比

HTML输入有一个占位符，其指定如下：

用户代理应该向用户提供此提示。当元素的值为空字符串或控件未聚焦（或两者都未聚焦）时。

您可以在此测试链接在浏览器中尝试此功能。

我认为，反对JavaFX这种行为的论点“当抓取焦点以表示已准备好接收用户输入时，应清除提示文本”是没有意义的，因为焦点文本字段有一个清晰可见的焦点环，因此用户知道即使在显示提示文本时，控件也已准备好接收输入。

在这方面，我认为JavaFX在默认情况下应该以与大多数HTML用户代理相同的方式进行操作。可以在JavaFX问题跟踪程序中创建一个调整请求，请求JavaFX中的输入提示与HTML实现类似（如果还没有为此创建问题的话）。

可供替代的

第三方Gluon Glisten具有自定义TextField控件，可以具有以下属性：

• 浮动文本-文本字段中的占位符文本，当接收到焦点时，文本字段会转换到文本字段的顶部

基于Glistet的TextField的好处是提示文本始终可见，无论用户是否在控件中输入了任何内容。