仅在用户开始输入时清除 JavaFX TextField 中的提示文本

IT小君   2021-10-27T02:34:39

默认行为是字段中的提示文本在字段获得焦点时被擦除。那是标记在现场的时候。

是否可以配置文本字段,以便仅在用户开始输入时删除提示文本?

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

点击广告,支持我们为你提供更好的服务
评论(5)
IT小君

解决方案

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

提示坚持

持久提示.css

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

PersistentPromptTextField.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 问题跟踪器中创建一个 Tweak 请求,以请求JavaFX中的输入提示的工作方式类似于 HTML 实现(如果尚未为此创建问题)。

选择

第三方Gluon Glisten 有一个自定义的 TextField 控件,可以有以下属性:

  • 浮动文本- TextField 内的占位符文本,当它接收到焦点时,它会转换到 TextField 的顶部。

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

胶子静止

胶子活性

2021-10-27T02:34:40   回复
IT小君

我知道它有点旧,但我自己需要它,这仍然非常重要。
我将完成jewelsea's answer 并给出一个更简单的解决方案。

背景

显然,这是 Java(FX) 的默认行为(仅当用户开始输入时才会清除 TextField 中的提示文本)。
但是,根据 JIRA 系统中的请求(或错误报告),
Java 更改了此行为(并在 TextField 获得焦点时默认清除文本)。

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


解决方案

要恢复到旧的默认值(以及更好的 IMO 行为),您需要做的就是添加以下代码行。

如果您的应用程序界面是使用正确的 Java 代码编写的。

Java代码:

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

textField您的 TextField 组件在哪里


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

JavaFX FXML (CSS):

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

-------------------------------------------------- ------------------------------

清除焦点行为

目前这是默认行为(当文本字段获得焦点时,文本字段的提示文本被清除),
因此您无需执行任何操作即可获得此行为
但以防 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;
}

希望这有助于...

2021-10-27T02:34:40   回复
IT小君

您可以在 '.text-field:focused' 区域中配置 '-fx-prompt-text-fill' 键,就像在 '.text-field' 区域(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 文件中添加“promptText”条目:

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

这就是全部并且对我有用。

2021-10-27T02:34:41   回复
IT小君

假设您通过以下方式设置提示文本:

    @FXML TextField tf;

    public void someMethod() {
        tf.setPromptText("This is the prompt text");
    }

您可以改为使用tf.setText(String str)来设置初始文本。

然后,在控制器的 initialize 方法中,添加:

    tf.setOnKeyTyped(new EventHandler<KeyEvent>() {

        @Override
        public void handle(KeyEvent event) {
            tf.setText(null);

        }
    });

您可以参考以获得更多帮助的链接:单击我!

2021-10-27T02:34:41   回复
IT小君

我确信可能有几种方法和技巧可以实现您的要求,但是,当您这样做时,您将覆盖默认、预期和标准的 UI 行为。当获取焦点以表示准备好接收用户输入时,应清除提示文本,而不是在用户开始输入后。

2021-10-27T02:34:41   回复