Qt Documentation

Contents

Qt Quick Virtual Keyboard - Basic Example

The example has two implementations: one for the desktop platforms and another for the 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 snippet from basic.pro shows how the qmake project is set up to choose the appropriate implementation based on the CONFIG options:

disable-desktop|android-embedded|!isEmpty(CROSS_COMPILE)|qnx {
    DEFINES += MAIN_QML=\\\"basic-b2qt.qml\\\"
} else {
    DEFINES += MAIN_QML=\\\"Basic.qml\\\"
}

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 2.0
import QtQuick.VirtualKeyboard 2.1
import "content"

Rectangle {
    ...
                TextField {
                    width: parent.width
                    previewText: "One line field"
                    enterKeyAction: EnterKeyAction.Next
                    onEnterKeyClicked: passwordField.focus = true
                }
    ...
                TextArea {
                    id: textArea

                    width: parent.width
                    previewText: "Multiple lines field"
                    height: Math.max(206, implicitHeight)
                }
}

The TextField and TextArea are inherited from the TextBase custom type, which has enterKeyEnabled, enterKeyText, and enterKeyAction properties. The TextField and TextArea instances in the snippet can set these properties to change the default behavior.

Running the Example

To run the example from Qt Creator, open the Welcome mode and select the example from Examples. For more information, visit Building and Running an Example.

Files:

© 2018 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.