如何仅更改javafx文本字段中最后一个字符的颜色

Question

我正在尝试制作一个打字游戏，我为用户输入创建了一个文本字段，并尝试制作游戏，以便文本字段的最后一个字符是红色的，如果它不匹配要键入的单词中的相应字符。以下是我目前所掌握的相关节点的类型。

java prettyprint-override">Label wordsToType = new Label();
TextField userInput = new TextField();
StringBuilder wordsTyped = new StringBuilder();
TextField lastChar = new TextField();

userInput.setOnKeyReleased(e -> {
    wordsTyped.append(userInput.getText()); // words typed is a string builder of what is in userInput

    if (wordsTyped.toString().charAt(wordsTyped.length() - 1) - wordsToType.getText().charAt(wordsTyped.length() - 1) != 0) {
        lastChar.setText(e.getText());
        lastChar.setStyle("-fx-text-fill: red; -fx-font-size: 16px;");
        wordsTyped.setLength(wordsTyped.length() - 1); // deletes last char from wordsTyped
        userInput.setText(wordsTyped.toString() + lastChar.getText());
        userInput.end();
    }
    wordsTyped.delete(0, wordsTyped.length());
});

Answer 1

如评论中所述，您可以使用RichTextFX突出显示具有不同样式的输入文本。下面是一个示例代码：

Java:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;
import org.fxmisc.richtext.StyleClassedTextField;
import org.fxmisc.richtext.StyledTextField;
import org.fxmisc.richtext.model.StyleSpans;
import org.fxmisc.richtext.model.StyleSpansBuilder;

import java.util.Collection;
import java.util.Collections;

public class HighlightedTextFieldExample extends Application {

    @Override
    public void start(Stage stage) {
        StyledTextField<Collection<String>, Collection<String>> textField = new StyleClassedTextField();
        textField.lengthProperty().addListener((observableValue, oldValue, newValue) -> {
            if (newValue > 0) {
                StyleSpans<Collection<String>> styleSpans = new StyleSpansBuilder<Collection<String>>()
                        .add(Collections.emptyList(), newValue - 1) // no style (leading characters)
                        .add(Collections.singleton("last-character"), 1) // add a style class for the last character
                        .create();
                textField.setStyleSpans(0, styleSpans);
            }
        });
        textField.setPrefWidth(400);

        Scene scene = new Scene(textField);
        scene.getStylesheets().add(HighlightedTextFieldExample.class.getResource("highlighting.css").toExternalForm());
        stage.setScene(scene);
        stage.setTitle("Last Character Highlighting Example");
        stage.show();
    }

    public static void main(String[] args) {
        launch();
    }
}

CSS 样式文件（荧光笔.css）：

.last-character {
    -fx-fill: red;
}

输出：