Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. QML TextField and overlay keyboard
Forum Updated to NodeBB v4.3 + New Features

QML TextField and overlay keyboard

Scheduled Pinned Locked Moved Solved QML and Qt Quick
11 Posts 2 Posters 4.3k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M Offline
    M Offline
    Manu19
    wrote on last edited by Manu19
    #1

    Hi devs, I`m currently develope a mobile cross-platform app (Qt 5.9.1) which has a contact page.
    This page has many textfields (e.g name, lastname, street, city .....) and on the bottom a send-button. When I input some text in the fields, the overlay keyboard becomes visible and covers my send-button. It is possible to move the page top, when the overlay keyboard becomes visible (e.g WhatsApp has this feature).

    Example code:

    import QtQuick 2.7
    import QtQuick.Controls 2.2
    import QtQuick.Layouts 1.3
    import QtGraphicalEffects 1.0
    import QtQuick.Controls.Material 2.2
    
    ApplicationWindow {
        visible: true
        width: 640
        height: 480
        title: qsTr("Example")
    
        Flickable {
            id: flickable
            contentHeight: root.implicitHeight
            anchors.fill: parent
            boundsBehavior: Flickable.OvershootBounds
            clip: true
    
            Pane {
                id: root
                anchors.fill: parent
                padding: 0
                ColumnLayout {
                    id: theContent
                    anchors.right: parent.right
                    anchors.left: parent.left
    
                    RowLayout {
                        Label {
                            topPadding: 6
                            leftPadding: 6
                            font.pointSize: 20
                            text: qsTr("Contact")
                            Layout.fillWidth: true
                        }
                    }
    
                    RowLayout {
                        Layout.leftMargin: 20
                        Layout.rightMargin: 20
                        Label {
                            wrapMode: Text.WordWrap
                            text: qsTr("First name: ")
                            Layout.fillWidth: true
                            Layout.preferredWidth: 2
                        }
                        TextField {
                            id: textFieldFirstName
                            Layout.fillWidth: true
                            Layout.preferredWidth: 3
                            onEditingFinished: {
                                focus = false
                            }
                        } // textField
    
                    } // row
    
                    RowLayout {
                        Layout.leftMargin: 20
                        Layout.rightMargin: 20
                        Label {
                            wrapMode: Text.WordWrap
                            text: qsTr("Last name: ")
                            Layout.fillWidth: true
                            Layout.preferredWidth: 2
                        }
                        TextField {
                            id: textFieldLastName
                            Layout.fillWidth: true
                            Layout.preferredWidth: 3
                            onEditingFinished: {
                                focus = false
                            }
                        } // textField
    
                    } // row
    
                    RowLayout {
                        Layout.leftMargin: 20
                        Layout.rightMargin: 20
                        Label {
                            wrapMode: Text.WordWrap
                            text: qsTr("Company: ")
                            Layout.fillWidth: true
                            Layout.preferredWidth: 2
                        }
                        TextField {
                            id: textFieldCompany
                            Layout.fillWidth: true
                            Layout.preferredWidth: 3
                            onEditingFinished: {
                                focus = false
                            }
                        } // textField
    
                    } // row
    
                    RowLayout {
                        Layout.leftMargin: 20
                        Layout.rightMargin: 20
                        Label {
                            wrapMode: Text.WordWrap
                            text: qsTr("City: ")
                            Layout.fillWidth: true
                            Layout.preferredWidth: 2
                        }
                        TextField {
                            id: textFieldCity
                            Layout.fillWidth: true
                            Layout.preferredWidth: 3
                            onEditingFinished: {
                                focus = false
                            }
                        } // textField
    
                    } // row
    
                    RowLayout {
                        Layout.leftMargin: 20
                        Layout.rightMargin: 20
                        Label {
                            wrapMode: Text.WordWrap
                            text: qsTr("E-mail: ")
                            Layout.fillWidth: true
                            Layout.preferredWidth: 2
                        }
    
                        TextField {
                            id: textFieldEMail
                            Layout.fillWidth: true
                            Layout.preferredWidth: 3
                            onEditingFinished: {
                                focus = false
                            }
                        } // textField
    
                    } // row
    
                    RowLayout {
                        Layout.leftMargin: 20
                        Layout.rightMargin: 20
                        Layout.topMargin: 6
                        Label {
                            wrapMode: Text.WordWrap
                            text: qsTr("Your message: ")
                            Layout.fillWidth: true
                            Layout.preferredWidth: 3
                        }
                    } // row
                    Rectangle {
                        Layout.leftMargin: 20
                        Layout.rightMargin: 20
                        Layout.fillWidth: true
                        height: 200
                        color: "white"
                        border.width: 1
                        border.color: "darkgrey"
                        ScrollView {
                            id: view
                            anchors.fill: parent
                            width: parent.width
                            anchors.margins: 6
                            TextArea {
                                id: textAreaMessage
                                implicitWidth: parent.width
                                selectByMouse: true
                                hoverEnabled: false
                                wrapMode: TextEdit.WordWrap
                                onEditingFinished: {
                                    focus = false
                                }
                            } // textArea
                        }
                    }
    
                    Button {
                        id: buttonSend
                        enabled: textFieldFirstName.text.length != 0 && textFieldLastName.text.length != 0
                        text: "Send"
                        anchors.right: parent.right
                        anchors.rightMargin: 20
                        onClicked: {
                            console.log("Send-Button clicked")
                        }
                    }
    
                } // col layout
            } // root
            ScrollIndicator.vertical: ScrollIndicator { }
        } // flickable
    }
    
    
    1 Reply Last reply
    0
    • sierdzioS Offline
      sierdzioS Offline
      sierdzio
      Moderators
      wrote on last edited by
      #2

      You can get keyboardRectangle() from Qt.inputMethod and use that information to scroll your view.

      (Z(:^

      M 1 Reply Last reply
      0
      • sierdzioS sierdzio

        You can get keyboardRectangle() from Qt.inputMethod and use that information to scroll your view.

        M Offline
        M Offline
        Manu19
        wrote on last edited by Manu19
        #3

        @sierdzio Thank you for your fast answer. Have you a little example for me how I can use this?

        1 Reply Last reply
        0
        • sierdzioS Offline
          sierdzioS Offline
          sierdzio
          Moderators
          wrote on last edited by
          #4

          I don't, unfortunately.

          Some hackish solution is available here and here.

          (Z(:^

          M 1 Reply Last reply
          0
          • sierdzioS sierdzio

            I don't, unfortunately.

            Some hackish solution is available here and here.

            M Offline
            M Offline
            Manu19
            wrote on last edited by
            #5

            @sierdzio Thank you, this helps a lot

            1 Reply Last reply
            0
            • M Offline
              M Offline
              Manu19
              wrote on last edited by Manu19
              #6

              Does anyone know how to move the flickable to a specific height. I`ve tested a bit with flickable.flick, but this seems not the proper way

              1 Reply Last reply
              0
              • sierdzioS Offline
                sierdzioS Offline
                sierdzio
                Moderators
                wrote on last edited by
                #7

                Try setting contentX or contentY properties.

                (Z(:^

                M 1 Reply Last reply
                0
                • sierdzioS sierdzio

                  Try setting contentX or contentY properties.

                  M Offline
                  M Offline
                  Manu19
                  wrote on last edited by Manu19
                  #8

                  @sierdzio Whith which function should i test it? Flickable does not have a function to move it programmaticaly besides flick( )

                  sierdzioS 1 Reply Last reply
                  0
                  • M Manu19

                    @sierdzio Whith which function should i test it? Flickable does not have a function to move it programmaticaly besides flick( )

                    sierdzioS Offline
                    sierdzioS Offline
                    sierdzio
                    Moderators
                    wrote on last edited by sierdzio
                    #9

                    @Manu19 said in QML TextField and overlay keyboard:

                    @sierdzio Whith which function should i test it? Flickable does not have a function to move it programmaticaly besides flick( )

                    contenxtX is a property. Just set it's value to any value you need and it will update the position automatically.

                    For example:

                    Button {
                      onClicked: flickable.contentY += 100
                    }
                    
                    Flicakble {
                      id: flickable
                      // some contents
                    }
                    

                    Or:

                    Flickable {
                      id: flickable
                      contentY: keyboardRect.height
                    }
                    
                    Rectangle {
                      id: keyboardRect
                      height: keyboardVisible? 500 : 0
                    }
                    

                    (Z(:^

                    M 1 Reply Last reply
                    0
                    • sierdzioS sierdzio

                      @Manu19 said in QML TextField and overlay keyboard:

                      @sierdzio Whith which function should i test it? Flickable does not have a function to move it programmaticaly besides flick( )

                      contenxtX is a property. Just set it's value to any value you need and it will update the position automatically.

                      For example:

                      Button {
                        onClicked: flickable.contentY += 100
                      }
                      
                      Flicakble {
                        id: flickable
                        // some contents
                      }
                      

                      Or:

                      Flickable {
                        id: flickable
                        contentY: keyboardRect.height
                      }
                      
                      Rectangle {
                        id: keyboardRect
                        height: keyboardVisible? 500 : 0
                      }
                      
                      M Offline
                      M Offline
                      Manu19
                      wrote on last edited by
                      #10

                      @sierdzio Shame on me. I thought contentY would be readOnly. I should go to bed and sleep. Thank you for your patience and for your example

                      sierdzioS 1 Reply Last reply
                      0
                      • M Manu19

                        @sierdzio Shame on me. I thought contentY would be readOnly. I should go to bed and sleep. Thank you for your patience and for your example

                        sierdzioS Offline
                        sierdzioS Offline
                        sierdzio
                        Moderators
                        wrote on last edited by
                        #11

                        @Manu19 said in QML TextField and overlay keyboard:

                        @sierdzio Shame on me. I thought contentY would be readOnly. I should go to bed and sleep. Thank you for your patience and for your example

                        Hehe, no worries. This property actually sounds almost as if it should be read-only. Before I wrote my reply I checked several times if it was writable or not, because I felt intuitively that it could not be :-) So, I understand you 100% here :D

                        (Z(:^

                        1 Reply Last reply
                        0

                        • Login

                        • Login or register to search.
                        • First post
                          Last post
                        0
                        • Categories
                        • Recent
                        • Tags
                        • Popular
                        • Users
                        • Groups
                        • Search
                        • Get Qt Extensions
                        • Unsolved