Question

当我通过prompt-text或直接通过setStyle()更改CSS的颜色时，当我单击TextField时，首先，它不会t会自动清除它，因此，要在字段中写入内容时，通常弹出的“栏”一直位于左侧-如以下图片所示：

在第一张图片中，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;
}

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

有关更多信息，请参见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提示文本不会在聚焦时被删除

2 个答案: