QML OUTFOCUS DETECTION

Madesh R

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

dheerendra

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

Madesh R

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

dheerendra

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

Madesh R

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();
        }
    }
}

}

dheerendra

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

dheerendra

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

Shrinidhi Upadhyaya

Hi @Madesh-R , sorry for the late answer,but if instead of handling the cordinates and the position in the mouseArea,i guess the below code is a more optimal way,

TextField  {
    id:textField
    width:100
    height:100
    z: 1
    focus: activeFocus
   }

 MouseArea {
 anchors.fill: parent
z:0
onClicked: {
    console.log("Hello")
    forceActiveFocus()
}

}