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 时相同发生。它忽略了 focused CSS 中的一部分。

我发现这个示例适用于绑定(bind)。

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

如果许多 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 用于字段注入(inject)。

---

有关详细信息，请参阅 JavaFX CSS Reference Guide .