仅在用户开始键入时清除JavaFX TextField中的提示文本 [英] Clear prompt text in JavaFX TextField only when user starts typing

查看:1351
本文介绍了仅在用户开始键入时清除JavaFX TextField中的提示文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

默认行为是,当字段正在聚焦时,字段中的提示文本将被删除。那是标记在场中的时候。



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



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

解决方案

解决方案



此示例将允许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;
}

PersistentPromptTextField.java

  import javafx.scene.control.TextField; 

公共类PersistentPromptTextField扩展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();
}
}

PromptChanger.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(,姓氏);

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

场景场景=新场景(布局);
scene.getStylesheets()。add(
getClass()。getResource(
persistent-prompt.css
).toExternalForm()
);
stage.setScene(场景);
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输入有一个




The default behaviour is that the prompt text in the field is erased as the field is being focused. That is when the marker is in the field.

Is it possible to configure the textfield so the prompt text is only erased when the user have started typing?

Otherwise I need to add a label beside/over each textfield for description of the value in it.

解决方案

Solution

This example will allow TextFields in JavaFX whose prompt behaviour is to show the prompt when the field is empty, even if the field has focus. The solution is a combination of custom CSS and a custom TextField class, which manipulates the css styles of the TextField.

persistent-prompt.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();
    }
}

PromptChanger.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);
    }
}

How prompt handling is currently implemented in JavaFX 8

Default CSS for JavaFX 8 (modena.css) for controlling the prompt text is as follows:

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

This will make the prompt text transparent whenever a field is focused, even if the field has no data in it.

In Comparison to HTML

HTML input has a placeholder, which is specified as follows:

User agents should present this hint to the user . . . when the element's value is the empty string or the control is not focused (or both).

You can try this functionality in your browser at this test link.

I think the argument against this behaviour for JavaFX "Prompt text should be cleared when focus is grabbed to signal readiness to receiving user input" is moot because focused text fields get a clearly visible focus ring, so the user knows that the control is ready to receive input even when the prompt text is displayed.

I think JavaFX should by default operate the same way as most HTML user agents in this respect. Feel free to create a Tweak request in the JavaFX issue tracker to request that the input prompt in JavaFX work similarly to HTML implementations (if there isn't an issue created for this already).

Alternative

The third party Gluon Glisten has a custom TextField control can have the following attributes:

  • Float Text- A place holder text inside a TextField which is transitioned to the top of the TextField when focus is received by it.

The nice thing about the Glisten based TextField is that the prompt text is always visible, whether or not the user has typed anything into the control.

这篇关于仅在用户开始键入时清除JavaFX TextField中的提示文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆