CODEWITHSUNDEEP
qtqml
Nmaster88
Nmaster88

Reputation: 1585

How can a Tab or Enter Key jump a Control in QML

What i want to do here is to prevent the tab and enter to jump the focus to a specific control but go to the next.

So for example lets say i have 3 sequencial TextField i'm focused on the first TextField now i press tab and instead of jumping to the second TextField the focus goes to the third TextField.

A full code example:

import QtQuick 2.9
import QtQuick.Controls 2.2
    import QtQuick.Layouts 1.3

ApplicationWindow {
    id: window
    title: "Stack"
    visible: true
    width: 1400

    Page {
        id: page
        anchors.fill: parent
        property int responsiveWidth: 1000
        property int maximumWidth: 900

        ScrollView {
            id:configScroll
            anchors.fill: parent
            function scrollToY(y) { 
                configScroll.flickableItem.contentY = y-30
            }
            GridLayout {
                columns: 2
                Keys.onPressed: {
                    if(event.key==Qt.Key_Return)
                    for (var i = 0; i < children.length; ++i)
                        if (children[i].focus) {
                            children[i].nextItemInFocusChain().forceActiveFocus()
                            break
                        }
                }
                width: page.width > page.responsiveWidth ? page.maximumWidth : page.width
                anchors.top: parent.top
                anchors.left: parent.left
                anchors.leftMargin: page.width > page.responsiveWidth ? (page.width - childrenRect.width)/2 : 10
                anchors.rightMargin: page.width > page.responsiveWidth ? 0 : 10


                    Label {
                        text: "Company Name"
                        color: "red"
                        Layout.fillWidth: true
                    }

                    TextField  {
                        objectName: "company_name"
                        font.bold: true
                        Layout.fillWidth: true
                        Layout.rightMargin: 10
                        onFocusChanged: if(focus) { configScroll.scrollToY(y); }
                    }


                    Label {
                        text: "tab or enter passes this TextField"
                        color: "red"
                        Layout.fillWidth: true
                    }

                    TextField  {
                        objectName: "company_name2"
                        font.bold: true
                        Layout.fillWidth: true
                        Layout.rightMargin: 10
                        onFocusChanged: if(focus) { configScroll.scrollToY(y); }
                    }

                    Label {
                        text: "label"
                        color: "red"
                        Layout.fillWidth: true
                    }

                    TextField  {
                        objectName: "company_name"
                        font.bold: true
                        Layout.fillWidth: true
                        Layout.rightMargin: 10
                        onFocusChanged: if(focus) { configScroll.scrollToY(y); }
                    }
            }
        }
    }
}

Upvotes: 1

Views: 1659

Answers (1)

Rick Pat
Rick Pat

Reputation: 879

You can use the QML Type KeyNavigation to setup custom navigation, take a look at the documentation: KeyNavigation QML Type You can set the KeyNavigation.tab property to navigate to a specific id like this:

TextField  {
    id: field1
    objectName: "company_name"
    font.bold: true
    Layout.fillWidth: true
    Layout.rightMargin: 10
    onFocusChanged: if(focus) { configScroll.scrollToY(y); }
    KeyNavigation.tab: field3
}

For navigation with enter-key here is a solution for this specific situation:

children[i].nextItemInFocusChain().nextItemInFocusChain().forceActiveFocus()

Upvotes: 2

Related Questions