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?