JavaFX-更改颜色后,TextField提示文本不会在聚焦时被删除

时间:2019-04-23 19:24:37

标签: java css javafx javafx-8

当我通过prompt-text或直接通过setStyle()更改CSS的颜色时,当我单击TextField时,首先,它不会t会自动清除它,因此,要在字段中写入内容时,通常弹出的“栏”一直位于左侧-如以下图片所示:

Focused first text field Focused second text field

  • 在第一张图片中,Username TextField被聚焦,其prompt-text的颜色变为#000000(黑色)。
  • 在第二张图片中,Password TextField被聚焦,它具有默认的prompt-text设置。一切都没有改变。

我浏览了JavaFX API文档,关于TextFields的大量StackOverflow案例,其他论坛上的CSS案例,modena.css.text-input)等等。我从未见过有人遇到像我这样的问题,该提议的解决方案对我有用。

在大多数情况下,人们建议使用-fx-prompt-text-fill: transparent;,但这会使所有prompt-texts都空着,无论他们是否专注。

我也尝试过text-input Class的一些变化:

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

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

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

我花了8到10个小时寻找并试图找到解决方案,但是我对JavaFX / CSS的了解还不够。一些帮助将不胜感激。

编辑1:

.text-input {
    -fx-prompt-text-fill: <your-color>;
}

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

这可行,但是它适用于所有TextFields。不是要寻找的特定对象。

#myId {
    -fx-prompt-text-fill: <your-color>;
}

#myId:focused {
    -fx-prompt-text-fill: transparent;
}

只要我保持原样,这也有效。当我单击仅执行以下操作的按钮:txtUsername.setStyle("-fx-prompt-text-fill: " + returnColorValueInHex(colorPickerValue) + ";");时,颜色会更改,但随后似乎会忽略myId:focused。好像不在那里。

.my-styleclass {
    -fx-prompt-text-fill: <your-color>;
}

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

这同样有效,但是当我应用上述setStyle()时,会发生与使用ID时相同的事情。它会忽略CSS中的focused部分。

我发现此示例适用于绑定。

txtUsername.styleProperty().bind(Bindings.when(txtUsername.focusedProperty())
                            .then("-fx-prompt-text-fill: transparent;")
                            .otherwise("-fx-prompt-text-fill: " + returnColorValueInHex(colorPickerValue) + ";"));

它确实可以实现我想要的功能,但是我想避免使用它,并且尽可能地设置CSS的样式。

为什么?我正在尝试制作人们可以自定义的应用程序。我希望它们能够更改应用程序某些部分的颜色,而prompt-text中的TextField是其中之一。我使用setStyle()来应用更改,以便他们可以预览。单击“保存”后,所有应用的样式都将保存在.css文件中,然后程序将在重新启动stylesheet后加载该文件。

编辑2:找到了解决方案here.

CSS:

.root{
    username-prompt-text-fill: #000000;
}
#txtUsername{
    -fx-prompt-text-fill: username-prompt-text-fill;
}
#txtUsername:focused{
    -fx-prompt-text-fill: transparent;
}

JAVA:

txtUsername.setStyle("username-prompt-text-fill: " + returnColorValueInHex(colorPickerValue) + ";");

2 个答案:

答案 0 :(得分:2)

使用以下CSS自定义提示文本填充,同时使其在聚焦时仍消失:

.text-input {
    -fx-prompt-text-fill: <your-color>;
}

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

如果要定位到特定的TextField,请为其指定ID并在CSS文件中定位该ID。

textField.setId("myId");
#myId {
    -fx-prompt-text-fill: <your-color>;
}

#myId:focused {
    -fx-prompt-text-fill: transparent;
}

如果许多TextField应该具有相同的样式,请考虑为它们全部提供一个自定义样式类。

textField.getStyleClass().add("my-styleclass");
.my-styleclass {
    -fx-prompt-text-fill: <your-color>;
}

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

注意:id / style类也可以通过FXML设置/添加。如果仅使用fx:id,则id将是相同的值,否则id用于CSS,fx:id用于字段注入。


有关更多信息,请参见JavaFX CSS Reference Guide

答案 1 :(得分:1)

this question Slaws'答案中的解决方案帮助我找到了解决问题的方法。

CSS:

.root{
    username-prompt-text-fill: <color>;
}
#txtUsername{
    -fx-prompt-text-fill: username-prompt-text-fill;
}
#txtUsername:focused{
    -fx-prompt-text-fill: transparent;
}

JAVA:

txtUsername.setStyle("username-prompt-text-fill: " + returnColorValueInHex(colorPickerValue) + ";");