Use hovered and hoverEnabled in a TextField
-
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.
-
hoverEnabled
is not read-only,hovered
is.If you want to know if a
TextField
is hovered, sethoverEnabled
totrue
, you will then be able to read thehovered
property. -
@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
-
@tomy
closeWindow { 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) } }
-
@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? -
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
-
@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
-
@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.
Sohovered: true
can't work. It's theTextField
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
-
@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!
-
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)?
-
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]
-