Use hovered and hoverEnabled in a TextField



  • Hi all,

    How to use these read-only features, hoverEnabled and hovered for a TextField in a QML project, please?

    Also, is it possible to use mouse selection or cut/copy/paste the text filed's text, too?


  • Moderators

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

    How to use these read-only features, hoverEnabled and hovered for a TextField in a QML project, please?

    like so ?

    Item{
        TextField{
            anchors.fill: parent
            ...... 
       }
       MouseArea{
            anchors.fill: parent
            hoverEnabled: true
            propagateComposedEvents: true
    
            onClicked: mouse.accepted = false
            onPressed: mouse.accepted = false
            onReleased: mouse.accepted = false
            onPositionChanged: mouse.accepted = false
            onDoubleClicked: mouse.accepted = false
            onPressAndHold: mouse.accepted = false
            onContainsMouseChanged: if(containsMouse) console.log("Mouse over TextField")
        }
    }
    


  • @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
       }
    

  • Moderators

    @tomy maybe I misunderstood what you want to do,

    can you explain a bit more?



  • @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.


  • Qt Champions 2018

    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.



  • @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


  • Moderators

    @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)
            }
     }
    
    


  • @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.

    0_1558074179254_8b25ed23-e8ff-47f6-b1fb-f53e77177ac9-image.png

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


  • Moderators

    @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


  • Qt Champions 2018

    @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



  • @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!


  • Qt Champions 2018

    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)?



  • @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.



  • 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

      0_1559885596524_918629f4-6c4b-4d04-b55c-e44f1824c5c4-image.png

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

    0_1559885737486_9abbb497-91f2-4a5c-864e-bd0fa2bf9621-image.png

    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.
      0_1559885979546_ac8c0c15-9ab8-4f25-842b-3fda88957b86-image.png
    • This will be the output when press the "red Rectangle"
      0_1559886016560_5d06831c-e3d3-4764-bddc-b525d386caa1-image.png

    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"

    0_1559886232329_97d33bde-72ef-4a1e-884a-6174767aeb4b-image.png

    -This will be printed when you release the press

    0_1559886279460_7a1b32b2-009e-40da-ba77-7178a0854ef6-image.png

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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.