QML OUTFOCUS DETECTION



  • Hi ,
    Is there some way that I can detect mouse click outside any focussed element.So that I can do some thing when such an event occurs. Say for example , I have a Text input field, when it's in active state, the users clicks outside the textInput field ,anywhere on the screen ,other than inside of that text field.How to handle this situation.

    Thanks in Advance


  • Qt Champions 2017

    For outside area you can define the MouseArea and handle the appropriate signals.



  • Thank You sir.
    Will try the same.
    there is a signal called onExited, I think that should solve my problem.


  • Qt Champions 2017

    if you want to catch the mouseHover then onExited will help you. For this you need to set hoverEnabled to true in MouseArea.



  • This is the code that I'm using .
    The problem with using mouse area is that , If mouse area is set to entire screen i'm not able to edit TextField.
    When I'm editing text, on clicking anywhere on the screen other than than text Input Field, I want my timer to restart.Not able to achieve this

    import QtQuick 2.9
    import QtQuick.Window 2.3
    import QtQuick.Controls 2.2
    Window {
    id:root
    visible: true
    width: 640
    height: 480
    title: qsTr("Timer")
    property bool blink:false
    property int blinkInterval:10000

    TextField {
    
        id:textField
        width:100
        height:100
        text: "test"
        onTextChanged:
        {
            reset()
        }
        background: Rectangle{
            id:back
            color: "white"
            width:100
            height:100
            //anchors.fill: parent
            ColorAnimation on color{
                from: "blue"
                to: "white"
                duration: 500
                running:root.blink
                loops: 30
                onStopped:
                {
                    console.log("Focus value:" + textField.focus);
                    textField.focus=false ;
                }
    
            }
        }
    
    }
    
    function reset(){
        timer.restart()
        root.blink=false
        back.color="white"
    }
    
    Timer{
        id:timer
        running: textField.focus
        repeat: false
        interval: root.blinkInterval
        onTriggered: {
            root.blink=true
        }
    }
    
    MouseArea{
        anchors.fill:parent
        onClicked: {
            console.log("Mouse Clicked")
            if(textField.focus === true)
            {
                //If clicked anywhere ,other than textinput field(Not handled the textInput area yet)
               //then reset the timer
                
                reset();
            }
        }
    }
    

    }


  • Qt Champions 2017

    I'm giving you some sample piece handle the mouse events appropriately. Check and adjust the same to your program.

    Rectangle {
        width: 400;height: 400;color:"red"
    
        MouseArea{
            anchors.fill: parent
            //enabled: false
            hoverEnabled: true
            onClicked: {
                console.log("Go to hell")
            }
            onEntered:{
    
            }
            onPositionChanged:{
                //console.log(" Pos changed ="+mouse.x + " Y ="+mouse.y)
                var point = Qt.point(mouse.x,mouse.y)
                if (t.contains(point)) {
                    console.log("I am inside the text field")
                }
            }
        }
        TextField{
            id : t
            text: "Welcome"
            hoverEnabled: true
        }
    }
    

  • Qt Champions 2017

    Did the solution worked for you ? If it worked move the issue to SOLVED state. It helps others.


Log in to reply
 

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