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

Question

当我通过setStyle()或直接通过CSS更改setStyle()的颜色时，当我单击TextField时，首先它不会自动清除它，正因为如此，当您准备在字段中写入时，通常会弹出的"bar“位于左侧--正如您在以下图片中所看到的：

​

​

• 在第一张图片中，Username TextField被聚焦，它的prompt-text颜色被更改为#000000 (黑色)。
• 在第二张图片中，Password TextField是聚焦的，它具有默认的prompt-text设置。这件事没有什么改变。

我查阅了JavaFX API文档、关于TextFields的大量StackOverflow案例、其他论坛上的TextFields案例、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 of TextField就是其中之一。我使用setStyle()应用更改，以便它们可以预览它。一旦他们点击“保存”，所有应用的样式都将保存在一个.css文件中，然后程序将在重新启动stylesheet时加载该文件。

编辑2:找到了一个解决方案这里。

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

这个问题和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) + ";");

Answer 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__/样式类也可以通过FXML设置/添加。如果您只使用fx:id，则id将是相同的值，否则id用于CSS，fx:id用于字段注入。

有关更多信息，请参见JavaFX CSS参考指南。