JavaFX - 更改颜色后，焦点不会删除TextField提示文本

Question

当我改变prompt-text的颜色时，无论是通过setStyle()还是直接通过CSS，当我点​​击TextField时，首先，它不会自动清除它，因为它，通常会弹出你的“酒吧” “即将在一个字段中写入一直到左边 - 正如您在下面的图片中看到的那样：

• 在第一张图片中，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) + ";");

Answer 1

使用以下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;
}

如果许多TextFields应该具有相同的样式，请考虑为它们提供所有自定义样式类。

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。

Answer 2

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) + ";");