CODEWITHSUNDEEP
qtqmltextfieldqtquick2qqmlcomponent
User22
User22

Reputation: 21

Remove label on Textfield in QML

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

enter image description here

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

enter image description here

I didn't find any solution for this.

Upvotes: 1

Views: 402

Answers (3)

Stephen Quan
Stephen Quan

Reputation: 26299

[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:

Upvotes: 0

hyde
hyde

Reputation: 62908

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"

Upvotes: 5

Jürgen Lutz
Jürgen Lutz

Reputation: 806

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.

Upvotes: -2

Related Questions