Problems with Open-Source Downloads read https://www.qt.io/blog/problem-with-open-source-downloads and https://forum.qt.io/post/638946

Form fields, virtual keyboard and screen real estate



  • I have a form with quite a number of input fields at the top of the form, but also in the middle and at the bottom. When I click into one of the TextInput fields, the virtual keyboard appears and covers the lower half of the screen, by this also covering what I am typing when the input field happens to be in the lower half as well.
    The example here gracefully avoids the problem by having input fields only in the upper half which is a questionable strategy.
    My solution with a different visual framework was to add a title and input field to the virtual keyboard, displaying the attached label and contents of the original field in the form. This way the users know which field they are editing and what they are typing.
    This solution involved a lot of programming though and I would like to know, if there already is something prefab.
    Or maybe you know a better solution?



  • Hello @HJPVVV, I have encountered this issue before and the solution I had was to shift the view upwards when the textbox would be hidden by the virtual keyboard. I am using a loader so my code is as follows:

        function shiftOnActiveFocusChanged(){
            var activeItem = mainWindow.activeFocusItem;
            if (activeItem != null && itemLoader.item && virtualKeyboardVisible){
    
                // Get the position of the item in item coordinates to know if loader needs to get shifted or not
                var overlayXY = activeItem.mapToItem(itemLoader, activeItem.x, activeItem.y)
    
                if (overlayXY.y + activeItem.height > (mainWindow.height-virtualKeyboardHeight)){
                    if(!itemLoader.shifted) {
                        itemLoader.shifted = true
                    }
                } else { 
                    // active focus item is null, so we shift back to normal
                    itemLoader.shifted = false
                }
            }
        }
    

    As you can see, I'm using a variable named shifted on my itemLoader. On it, I have a handler onShiftedChanged to perform the necessary shift up/down. You can even do this with states on your QML view as well. I hope this helps!


Log in to reply