0

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.

James Z
  • 12,209
  • 10
  • 24
  • 44
User22
  • 11
  • 3

3 Answers3

3

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"
hyde
  • 60,639
  • 21
  • 115
  • 176
  • The placeholderText will not be visible when text is set, so, perhaps you can omit the test for `text` `placeholderText: focus ? "" : "Enter name"` – Stephen Quan Jun 27 '23 at 22:50
  • @StephenQuan In the screenshot, the placeholder text is visible when there is text in the field. – hyde Jun 28 '23 at 06:04
1

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

Stephen Quan
  • 21,481
  • 4
  • 88
  • 75
-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.

Jürgen Lutz
  • 329
  • 1
  • 1
  • 10
  • Not a downvoter, but this is awfully verbose way to do something which you can do in 1 line. – hyde Jun 27 '23 at 18:52
  • 1
    2 downvotes for a working solution is a bit of a surprise to me. And oneliners are not always the best solution . Not even sure if your accepted solution is working if you clean the textfield after an input (Not testen that) – Jürgen Lutz Jun 27 '23 at 19:00
  • 1
    To differentiate from property-bind-by-expression answer, you could implement property-bind-by-function, e.g. `placeholderText: function () { if (focus === true && text.length > 0) { return ""; } ellse { return "Placeholder text"; } }`. I just suggested that since it is consistent with the style you've established. – Stephen Quan Jun 28 '23 at 00:32
  • @JürgenLutz Yeah, especially downvoting a working (as far as I can see) solution without a comment is annoying, but it's in the nature of this site, for good or for bad. – hyde Jun 28 '23 at 06:02