JavaFX

Question

当我通过 setStyle() 或直接通过 CSS 更改 prompt-text 的颜色时，当我单击 TextField 时，首先，它不会自动清除它，因此，通常在您要在字段中写入时弹出的 "bar" 一直向左 - 正如您在以下图片中看到的那样：

在第一张图片中，Username TextField 被聚焦，其 prompt-text 颜色更改为 #000000（黑色）。
在第二张图片中，Password TextField 被聚焦，它具有默认的 prompt-text 设置。没有任何改变。

我查看了 JavaFX API 文档，大量关于 TextFields 的 Whosebug 案例，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 的样式。

为什么？我正在尝试制作一个人们可以自定义的应用程序。我希望他们能够更改应用程序某些部分的颜色，TextField 的 prompt-text 就是其中之一。我使用 setStyle() 来应用更改，以便他们可以预览。单击 "Save" 后，所有应用的样式都将保存在 .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 应该具有相同的样式，请考虑为他们提供自定义样式 class。

textField.getStyleClass().add("my-styleclass");

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

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

注意：id/style classes 也可以通过 FXML set/added。如果仅使用 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) + ";");

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

JavaFX - TextField prompt text doesn't get deleted upon focus after changing color

css

java

javafx-8