Remove label on Textfield in QML

Question

When I try to enter in the textfield, the placeholderText is displayed as label of the Textfield.

Is there any way to remove the placeholderText when Textfield is active and filled?

I didn't find any solution for this.

Answer 1

You could try simply clearing the place holder text when you don't want it to be visible, something like this:

placeholderText: focus || text ? "" : "Enter name"

Answer 2

You can check for focus and text length and set the placeholder text accordingly:

TextField {
    placeholderText: "Placeholder Text"

    onTextChanged: {
        checkPlaceholderText();
    }

    onFocusChanged: {
        checkPlaceholderText();
    }

    function checkPlaceholderText() {
        if (focus === true && text.length > 0) {                
            placeholderText = "";
        } else {
            placeholderText = "Placeholder Text";
        }
    }
}

There is still a gap in the border for the placeholder. If you want to get rid of this, you can create your own TextField and override the placeholder item.

Answer 3

[REWRITE - with guidance from SMR's comments]

Firstly, what you describe is actually the default behavior of Qt5.15.x.

    TextField {
        placeholderText: "Enter name"
    }

What appears to be the issue is the theme your Qt is in which you may like to review via the qtquickcontrols2.conf configuration file. Where you can choose between Default, Fusion, Imagine, Material, and Universal.

Here's a sample qtquickcontrols2.conf that selects Material style:

[Controls]
Style=Material

These styles may and will change the appearance of controls such as TextField and what happens with the placeholderText when you start typing. Some of the styles may have your desired behavior.

It's best to review these styles as one may implement the look and feel you're after so you can switch to it without implementing any code.

References:

• https://doc.qt.io/qt-5/qtquickcontrols2-configuration.html
• https://doc.qt.io/qt-5/qtquickcontrols2-styles.html#available-styles