Use hovered and hoverEnabled in a TextField

[tomy]

@J.Hilk

Do we always need a wrapper, like an Item, over a component to make use of a feature of it when it's in read-only?

And, how to implement this, please?

Item {
       id: item

       TextField {
           id: field
           placeholderText: qsTr("Enter Your Name")
       }

       MouseArea {
           anchors.fill: parent
           hoverEnabled: true
           propagateComposedEvents: true
       }
   }

Button {
       text: "Next"
       anchors.top: item.bottom   // doesn't work!
       onClicked: // do sth
   }

[J.Hilk]

@tomy maybe I misunderstood what you want to do,

can you explain a bit more?

[tomy]

@J.Hilk

In the first question I aimed to ask: In two of the links I sent there's text, read-only, on the right-hand side of the description of the feature for Textfield. Please see. I used those features without any wrapper like Item here, and they were marked as unrecognized, hence seemingly the wrapper is required and the read-only is saying that.

In the second question: I wanted to share with you a snippedcode where such a wrapper is applied, there's a problem, the "doesn't work" comment, in it. And asked how to solve it, please.

[GrecKo]

hoverEnabled is not read-only, hovered is.

If you want to know if a TextField is hovered, set hoverEnabled to true, you will then be able to read the hovered property.

[tomy]

@GrecKo
Like this?

Window {
    visible: true
    width: 640; height: 480
    title: qsTr("Hello World")

        TextField {
            id: field
            visible: false
            placeholderText: qsTr("Enter Your Name")
            hoverEnabled: true
            hovered: true
        }
 }

Invalid property assignment: "hovered" is a read-only property

[J.Hilk]

@tomy
close

Window {
    visible: true
    width: 640; height: 480
    title: qsTr("Hello World")

        TextField {
            id: field
            visible: false
            placeholderText: qsTr("Enter Your Name")
            hoverEnabled: true
            onHoveredChanged: console.log("Hovered changed to", hovered)
        }
 }

[tomy]

@J.Hilk
Thank you, but still can't find the hovered property used in this code!

Let's clarify the issue originally.
1- What is the meaning of read-only when it's used in a property description like hovered, except for its literal meaning?
2- How to use them, if they are usable by the developer?

[Shrinidhi Upadhyaya]

Hi @tomy , here is the sample code:-

 TextField {
                id: field
                placeholderText: qsTr("Enter Your Name")
                color: hovered ? "red" : "black"
                //                    hoverEnabled: true
                onHoveredChanged: console.log("Hovered changed to", hovered,hoverEnabled)
            }

@J-Hilk ,@GrecKo , i dont know but by default the hoverEnabled property is true, you dont need to set it.But when i look into the documentation[https://doc.qt.io/qt-5/qml-qtquick-controls2-textfield.html], it says by default it is false.

Does TextField behave differently in different versions?But i checked the code on both Qt5.9.2 and Qt5.12.2

[J.Hilk]

@tomy said in Use hovered and hoverEnabled in a TextField:

but still can't find the hovered property used in this code!

?

onHoveredChanged: console.log("Hovered changed to", hovered)

The hovered state changes and you get a console log about the change and a console log about the hovered current state

[GrecKo]

@tomy said in Use hovered and hoverEnabled in a TextField:

Thank you, but still can't find the hovered property used in this code!

ctrl-f "hovered"

1- What is the meaning of read-only when it's used in a property description like hovered, except for its literal meaning?

No other meaning than its literal meaning, you can only read it, not write to it.
So hovered: true can't work. It's the TextField that's telling you wether it is hovered, not you the developper that's telling it.

2- How to use them, if they are usable by the developer?

By reading it/reacting on its changes.

https://doc.qt.io/qt-5/qtqml-syntax-objectattributes.html#read-only-properties

[tomy]

@GrecKo
Thank you.

How to use displayText in a TextInput? I went for something like this but it doesn't work.

TextInput {
               id: input
               width: 50; height: 20
               text: displayText ? "For testing" : "For using"
               anchors.fill: parent
               anchors.margins: 4
               focus: true
           }

As well as, the link you provided is seemingly just about declaring and initializing a read-only property while I'm searching for a rule on how to use built-in read-only properties of components!

[GrecKo]

You just use them, what is stopping you?

@tomy said in Use hovered and hoverEnabled in a TextField:

text: displayText ? "For testing" : "For using"

What is that supposed to do? What's do you want to do (in non code term)?

[tomy]

@GrecKo

I have no intention except to find a way to use them when I see them. You say, use, I say:

What's this property for?
Where to use it?
How to use it?

I even made an attempt.

[Shrinidhi Upadhyaya]

Hi @tomy , i have not used this property till now though, just to answer your queries

• displayText is a property which contains the text which is displayed in the TextInput, by default displayText is same as text.

• For example if you change the echoMode to echoMode: TextInput.Password, which means that the text which you enter will not visible, it will be password masked like this

  

So at this point of time displayText will not be same as the text, that is if you try to print displayText and text you will get something like this:-

So text is basically the actual text while displayText is the text which is visible.

Have just created a sample code:-

 Rectangle {
    id: txtInpRect

    height: 20
    width: 100
    border.color: "grey"

    TextInput {
        id: txtInp

        anchors.fill: parent
        echoMode: TextInput.Password
        color: displayText === text ? "red":"black"
    }
}

Rectangle {
    height: 20
    width: 20
    color: "red"
    anchors.left: txtInpRect.right
    anchors.leftMargin: 20

    MouseArea {
        anchors.fill: parent
        onPressed: {
            txtInp.echoMode = TextInput.Normal
            console.log("Text:",txtInp.text)
            console.log("DisplayText:",txtInp.displayText)
        }

        onReleased: {
            txtInp.echoMode = TextInput.Password
            console.log("Text:",txtInp.text)
            console.log("DisplayText:",txtInp.displayText)
        }
    }
}

Sample Outputs:-

• This will be the output when you enter the text.
  

• This will be the output when press the "red Rectangle"
  

So if you observe in the first screenshot the color of the text is black while in the second its red, so here i have made use of the displayText property to set the color.

color: displayText === text ? "red":"black"

• Check the logs in your console when you press the "red Rectangle"
  -This will be printed when you press the "red Rectangle"

-This will be printed when you release the press

For more information about it please have a look into this documentation [https://doc.qt.io/qt-5/qml-qtquick-textinput.html#displayText-prop]