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

Question

I am trying to make a typing game, I created a text field for user input and am trying to make the game so that the last char of the textfield is red if it doesn't match the corresponding char in the words to be typed. Below is what I have so far along with the current types of relevant nodes.

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

As mentioned in the comments, you can use RichTextFX to highlight input texts with different styles. Here is a sample code:

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 Style File ( highlighter.css ):

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

Output: