Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Using TextInput to toggle the virtualKeyboard



  • This might be hard for me to explain but I will try. First have a look at my code so you can get an idea of what it does I am sure it seems rather simple.

    main.qml:

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.VirtualKeyboard 2.4
    import QtQuick.Controls 2.5
    
    Window {
        id: window
        visible: true
        width: 640
        height: 480
    
        TextInput{
            id:inputItem
            anchors.centerIn: parent
            height: 55
            width: 120
            text: "Enter text here"
    
            onActiveFocusChanged: {
                if(activeFocus) inputPanelContainer.textDisplay = inputItem.text
            }
    
            onDisplayTextChanged: {
                inputPanelContainer.textDisplay = text
            }
        }
    
        InputPanelContainer {
            id: inputPanelContainer
            x: 0
            y: window.height
        }
    }
    

    InputPanelContainer.qml:

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.VirtualKeyboard 2.4
    import QtQuick.Controls 2.5
    
    Item{
        id:inputPanelContainer
        z: 99
        width: window.width
        height: childrenRect.height
        
        property string textDisplay:""
        
        Rectangle{
            anchors.top: parent.top
            width: parent.width
            height: startText.height
            color: "lightgrey"
        }
        
        Text{
            id:startText
            text:inputPanelContainer.textDisplay
            anchors{
                top:parent.top
                horizontalCenter: parent.horizontalCenter
            }
        }
        
        InputPanel {
            id: inputPanel
            z: 99
            x: 0
            anchors.top: startText.bottom
            width: inputPanelContainer.width
            
            states: State {
                name: "visible"
                when: inputPanel.active
                PropertyChanges {
                    target: inputPanelContainer
                    y: window.height - inputPanelContainer.height
                }
            }
            
            transitions: Transition {
                from: ""
                to: "visible"
                reversible: true
                ParallelAnimation {
                    NumberAnimation {
                        properties: "y"
                        duration: 250
                        easing.type: Easing.InOutQuad
                    }
                }
            }
        }
    }
    

    So as you can see I have a basic TextInput and when the user clicks the TextInput field they can use the virtualKeyboard to alter said text. Also, this text is displayed on the Keyboard (or above the keyboard) in real time so they can see what they are doing in the event that the TextInput field gets covered.

    The problem is I never want the user to be able to choose the cursor location. I would rather have the TextInput act more like a button. I tried achieving this with the selectAll() function:

    onActiveFocusChanged: {
                selectAll()
                if(activeFocus) inputPanelContainer.textDisplay = inputItem.text
            }
    

    and this works great the first time the user clicks the TextInput field but for some reason it only works the first time. Any subsequent click of the TextInput field and it no longer selects the entire string. So is their another feature I could use ( I tried a few, like button) that will work or is there a way to use selectAll() such that any time the user clicks the TextInput field the entire string is highlighted.

    Essentially, I am trying to eliminate this cursor placement feature because I know my users wont have a mouse they will only have their finger and trying to place the exact location of the cursor with a finger will be a struggle for anyone who doesn't have skinny fingers.

    EDIT: I managed to get something that forces it to work like I want but it's a bit of a work around. By using a button I can call inputItem.forceActiveFocus onclicked(). It will place the cursor at the end of the string that is to be edited if I keep it visible and if it is set to not visible then it's a non-issue but surely there is a better way?


Log in to reply