- Qt 6.12
- Qt Virtual Keyboard
- Qt Virtual Keyboard Examples
- Virtual Keyboard in Qt Quick
- Qt Virtual Keyboard | Commercial or GPLv3

# Virtual Keyboard in Qt Quick

This example shows how to use the virtual keyboard in a Qt Quick application.

The example has two implementations: one for desktop platforms and another for embedded platforms. The former version enables text input into several text fields using the virtual keyboard, whereas the latter version uses the same UI but with a custom virtual keyboard InputPanel. The following snippets show how to set up the project to choose the appropriate implementation based on the CONFIG options:

- In qmake (`basic.pro`):

       !qtConfig(vkb-desktop) {
           DEFINES += MAIN_QML=\\\"basic-b2qt.qml\\\"
       } else {
           DEFINES += MAIN_QML=\\\"Basic.qml\\\"
       }

- In CMake (`CMakeLists.txt`):

       if(NOT QT_FEATURE_vkb_desktop)
           target_compile_definitions(basic PUBLIC
               MAIN_QML="basic-b2qt.qml"
           )
       endif()
           ...
       if(QT_FEATURE_vkb_desktop)
           target_compile_definitions(basic PUBLIC
               MAIN_QML="Basic.qml"
           )
       endif()

The example enables the virtual keyboard by setting the `QT_IM_MODULE` environment variable before loading the `.qml` file:

     #include <QQuickView>
     #include <QGuiApplication>
     #include <QQmlEngine>

     int main(int argc, char *argv[])
     {
         qputenv("QT_IM_MODULE", QByteArray("qtvirtualkeyboard"));

         QGuiApplication app(argc, argv);
         QQuickView view(QString("qrc:/%2").arg(MAIN_QML));
         if (view.status() == QQuickView::Error)
             return -1;
         view.setResizeMode(QQuickView::SizeRootObjectToView);

         view.show();

         return app.exec();
     }

Besides this, it uses custom TextField and TextArea items to configure the [ENTER] key behavior using the EnterKeyAction attached property.

     import QtQuick
     import QtQuick.Controls
     import QtQuick.VirtualKeyboard
     import "content"

     Rectangle {
         ...
                     TextField {
                         width: parent.width
                         placeholderText: "One line field"
                         enterKeyAction: EnterKeyAction.Next
                         onAccepted: passwordField.focus = true
                     }
         ...
                     TextArea {
                         id: textArea
                         width: parent.width
                         placeholderText: "Multiple line field"
                         height: Math.max(206, implicitHeight)
                     }
     }

The TextField and TextArea controls extend the respective Qt Quick Controls 2 types with `enterKeyEnabled` and `enterKeyAction` properties. The TextField and TextArea instances in the snippet can set these properties to change the default behavior.

#### Running the Example

You can run the example from:

- Qt Creator

  Open the Welcome mode and select the example from Examples. For more information, see Qt Creator: Tutorial: Build and run.

- Qt Extension for Visual Studio Code

  Run the Qt: Open Qt examples command from the Command Palette, and select the example from the list. For more information, see Qt Extension for Visual Studio Code: Tutorial: Build and run.

Example project @ code.qt.io