Hide input caret of TextField in JavaFX8

Question

I would like to hide the input caret of a TextField in JavaFX8. I already tried to set the text fill to white (my TextField has a white background), but then my user input also disappears.

The problem is that the textfield still needs focus, so I also thought of some EventHandler which listens to user input, and focusses on the textfield when a key is pressed, but then I would miss the first key typed.

Anyone that knows how to do this? Or is it not possible in JavaFX8?

Answer 1

Update for Java 8u40

A CSS style class was added to JavaFX to switch on and off the text field caret which is (in most cases) a better solution than the custom skin approach in this answer.

This property can be applied in CSS to any text area or text field:

-fx-display-caret: false;

For more details, see the related question:

• How can I turn off the blinking cursor in a TextArea in Java?

---

You could use a custom skin to control the text field caret.

Sample Skin

Allows you to specify the caret color in the constructor.

CAUTION: this solution extends from a com.sun class so it is not guaranteed to continue working in future JavaFX versions. (This solution was tested against Java8u25 and worked for that version).

I suggest that you create a feature request in the JavaFX issue tracker requesting more control over the caret using publicly supported methods (e.g. the addition of new css properties to control the caret appearance).

import com.sun.javafx.scene.control.skin.TextFieldSkin;
import javafx.scene.control.TextField;
import javafx.scene.paint.Color;

public class TextFieldCaretControlSkin extends TextFieldSkin {
    public TextFieldCaretControlSkin(TextField textField, Color caretColor) {
        super(textField);

        setCaretColor(caretColor);
    }

    private void setCaretColor(Color color) {
        caretPath.strokeProperty().unbind();
        caretPath.fillProperty().unbind();

        caretPath.setStroke(color);
        caretPath.setFill(color);
    }
}

Sample Application

Demonstrates the use of the custom TextFieldCaretControlSkin.

import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.TextField;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class CaretColorizer extends Application {

    @Override 
    public void start(Stage stage) throws Exception {
        TextField redCaretTextField = new TextField("Red Caret");
        redCaretTextField.setSkin(
                new TextFieldCaretControlSkin(
                        redCaretTextField,
                        Color.RED
                )
        );

        TextField noCaretTextField = new TextField("No Caret");
        noCaretTextField.setSkin(
                new TextFieldCaretControlSkin(
                        noCaretTextField,
                        Color.TRANSPARENT
                )
        );

        TextField normalTextField = new TextField("Standard Caret");

        VBox layout = new VBox(
                10,
                redCaretTextField,
                noCaretTextField,
                normalTextField
        );

        layout.setPadding(new Insets(10));
        stage.setScene(new Scene(layout));

        stage.show();
    }

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

Answer 2

I already found a workaround for this, and I want to share this with you of course. If anyone else wants to hide the caret until user input, you can use this:

I have created a change listener, which changes the text color on user input.

textfield.textProperty().addListener(new ChangeListener<String>(){

        @Override
        public void changed(ObservableValue<? extends String> observable,
                String oldValue, String newValue) {

            if (!textfield.getText().trim().isEmpty()) {
                textfield.setStyle("-fx-text-fill: black");
            } else {
                textfield.setStyle("-fx-text-fill: white");
            }

        }

});

Make sure the text fill is white on startup, I did this in the css file of my FXML:

#textfield {
    -fx-text-fill: white;
}

Sorry for bothering you all with this question. However, this subject is not greatly discussed online, so I hope it could be useful for some of you.