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

Question

当我通过setStyle() 或直接通过CSS 更改prompt-text 的颜色时，当我点击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。不是针对特定的，这是我正在寻找的。​​p>

#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 样式。

为什么？我正在尝试制作人们可以自定义的应用程序。我希望他们能够更改应用程序某些部分的颜色，TextField 的prompt-text 就是其中之一。我使用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

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

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;
}

如果许多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。