C

Qt Quick Ultralite text_input Example

Demonstrates how to use TextInput and InputPanel items in Qt Quick Ultralite.

Overview

This example demonstrates how to use TextInput in combination with Qt Quick Ultralite Virtual Keyboard (InputPanel) and hardware key input. The application consists of six custom text input fields. The application content can be flicked.

To support hardware key input, the platform port has to implement Qul::PlatformInterface::handleKeyEvent. The input from virtual keyboard does not require any changes at platform port level.

Qt Quick Ultralite considers user input as dynamic text, which requires using font.unicodeCoverage property with static font engine. The example defines font.unicodeCoverage for Static font engine in CustomTextField. Static font engine bundles glyph data. Depending on MCU.Config.autoGenerateGlyphs and auto collected coverage it may be necessary to provide additional coverage via font.unicodeCoverage for the font used by the TextInput item. A box glyph will be displayed when the font engine can't find a glyph for the user input. The fontcompiler will ensure that duplicate glyph data is not included, even if there is an overlap between what was auto collected or explicitly listed in various locations via font.unicodeCoverage.

Note that with Monotype Spark font engine the glyph availability depends on the bundled font. The font.unicodeCoverage and MCU.Config.autoGenerateGlyphs properties does not effect glyph availability with Monotype Spark font engine.

You can enable Qt Quick Ultralite Virtual Keyboard in your application, by importing QtQuick.VirtualKeyboard module and initializing InputPanel. See text_input.qml for an example.

InputPanel {
    id: keyboard
    anchors.horizontalCenter: parent.horizontalCenter
    width: StyleConstants.vkbScreenWidth
    y: yPositionWhenHidden
    property real yPositionWhenHidden: parent.height
}

Keyboard Layouts and input method hints

The application demonstrates different Qt Quick Ultralite Virtual Keyboard Layout Types with different values of inputMethodHints property of TextInput.

You can change the focus from one CustomTextField to the next CustomTextField by clicking/touching Qt Quick Ultralite Virtual Keyboard Enter key. You can also change the foucs from one CustomTextField to any other CustomTextField by clicking/touching on the field.

Main Layout

The main layout is the default layout for regulart text input.

One line field

When you click/touch the first custom text input One line field, the Qt Quick Ultralite Virtual Keyboard will animate from the bottom of the screen in main layout. The value of inputMethodHints property of CustomTextField is the default Qt.ImhNone. This text input field allows lower case characters, upper case characters, numbers and symbols.

Upper case field

By changing the focus to Upper case field, the Qt Quick Ultralite Virtual Keyboard displays the main layout. The application sets the value of inputMethodHints property of CustomTextField to Qt.ImUppercaseOnly which disables Qt Quick Ultralite Virtual Keyboard Shift button. This text input field allows upper case characters only, numbers and symbols.

Lower case field

By changing the focus to Lower case field, the Qt Quick Ultralite Virtual Keyboard displays main layout. The application sets the value of inputMethodHints property of CustomTextField to Qt.ImhLowercaseOnly which disables Qt Quick Ultralite Virtual Keyboard Shift button. This text input field allows lower case characters only, numbers and symbols.

Dialpad Layout

By changing the focus to Phone number field, the Qt Quick Ultralite Virtual Keyboard displays dialpad layout which the application activates by setting the value of inputMethodHints property of CustomTextField to Qt.ImhDialableCharactersOnly.

Formatted numbers Layout

By changing the focus to Formatted number field, the Qt Quick Ultralite Virtual Keyboard will show numeric layout which the application activates by setting the value of inputMethodHints property of CustomTextField to Qt.ImhFormattedNumbersOnly.

Digits Only Layout

By changing the focus to Digit only field, the Qt Quick Ultralite Virtual Keyboard will show digits only layout which the application activates by setting the value of inputMethodHints property of CustomTextField to Qt.ImhDigitsOnly.

Note: Qt Quick Ultralite Virtual Keyboard layout selection is based on locale. If a locale doesn't implement a certain layout type, Qt Quick Ultralite Virtual Keyboard will use the fallback locale to look up the layout type. See Keyboard layouts and Input locale for more information.

Pinyin Support

You can build this example with or without Pinyin Support. Pinyin is a complex input method for simplified Chinese. See Pinyin support for more information.

Building the example with Pinyin support will increase the memory footprint, so only certain reference boards are supported with Pinyin support enabled. Check the list of Target platforms with Pinyin support below.

Note: You can reduce the memory footprint of Pinyin by generating a smaller dictionary using qulpinyingenerator tool.

Target platforms with Pinyin support

Project structure

Cmake project file

There are 4 targets in CMakeLists.txt file:

text_input
text_input_retro
text_input_spark
text_input_retro_spark

text_input and text_input_retro targets are configured for Static font engine which supports languages of non-complex scripts. text_input_spark and text_input_retro_spark are configured for Monotype font engine which supports languages of complex scripts. See Languages and Writing Systems and Keyboard Layouts for more information.

Targets with retro are configured for retro built-in style while the other targets are configured for default built-in style. Targets set the style in qul_add_target API using SELECTORS option. See Keyboard Styles for more information.

Depending on the target platform, CMakeLists.txt sets TEXT_INPUT_SELECTORS variable to "pinyin" to configure all targets to support Pinyin input method.

if (QUL_PLATFORM STREQUAL "qt"
    OR QUL_PLATFORM MATCHES "^mimxrt1050" OR QUL_PLATFORM MATCHES "^mimxrt1170"
    OR QUL_PLATFORM MATCHES "^stm32f469i" OR QUL_PLATFORM MATCHES "^stm32f769i" OR QUL_PLATFORM MATCHES "^stm32h750b")
    set(TEXT_INPUT_SELECTORS "pinyin")
endif()

if (TEXT_INPUT_SELECTORS STREQUAL "pinyin")
# Targets configured for Static font engine with Pinyin support
    qul_add_target(text_input
        QML_PROJECT mcu_text_input_pinyin.qmlproject
        GENERATE_ENTRYPOINT
    )
    qul_add_target(text_input_retro
        QML_PROJECT mcu_text_input_pinyin.qmlproject
        SELECTORS retro
        GENERATE_ENTRYPOINT
    )

# Targets configured for MonoType font engine with Pinyin support
    qul_add_target(text_input_spark
        QML_PROJECT mcu_text_input_spark_pinyin.qmlproject
        SELECTORS ${TEXT_INPUT_SELECTORS}
        GENERATE_ENTRYPOINT
    )
    qul_add_target(text_input_retro_spark
        QML_PROJECT mcu_text_input_spark_pinyin.qmlproject
        SELECTORS ${TEXT_INPUT_SELECTORS};retro
        GENERATE_ENTRYPOINT
    )

QmlProject files

The QmlProject files contain the required Qml files, configuration of the font engine, font files and Pinyin support configuration.

text_input example contains 4 QmlProject files:

mcu_text_input.qmlproject
mc_text_input_pinyin.qmlproject
mcu_text_input_spark.qmlproject
mcu_text_input_pinyin_spark.qmlproject

mcu_text_input.qmlproject contains the application configuration for text_input and text_input_retro targets. mcu_text_input_pinyin.qmlproject sets MCU.Config.vkbPinyinSupport property to true to configure the application for the same targets with Pinyin input method support. Those QmlProject files configure the application to use Static font engine and include TrueType font file fonts/NotoSansSC-Regular.ttf.

mcu_text_input_spark.qmlproject configures the application for text_input_spark and text_input_retro_spark targets. mcu_text_input_pinyin_spark.qmlproject sets MCU.Config.vkbPinyinSupport property to true to configure the application for the same targets with Pinyin input method support. Those QmlProject files configure the application to use Monotype font engine and include fontmap file fonts/TextInputFontmap.fmp. If TEXT_INPUT_SELECTORS variable is set to "pinyin" in CMakeLists.txt, fonts/+pinyin/TextInputFontmap.fmp is used.

PinyinSupport

PinyinSupport.qml file has constant font configurations that set font.unicodeCoverage to Chinese unicode block which is required by Static font engine to display Chinese characters in TextInput.

Only mcu_text_input_pinyin.qmlproject includes this Qml file.

import QtQuick
import QtQuick.VirtualKeyboard

QtObject {
    readonly property font unicodeRegister: Qt.font({
        pixelSize: StyleConstants.wordSuggestionSize * StyleConstants.scaleHint,
        unicodeCoverage: [
            // Chinese characters
            "\u4F46\u4F69\u4F73\u4F7F\u5047\u504F\u5065\u5076\u5077\u508D\u50BB\u50CF\u5242\u52BF\u52D2\u52E4\u54FC\u5524\u5594\u559C\u559D\u55D3\u55E8\u55FD\u561B\u578B\u57AB\u57C3\u57DF\u57F9\u57FA\u5815\u582A\u5835\u586B\u58A8\u58C1\u58E4\u5A46\u5A5A\u5A74\u5A92\u5AB3\u5AC1\u5AC2\u5AE9\u5C24\u5C5E\u5C65\u5C71\u5C81\u5C82\u5CF0\u5CFB\u5D07\u5D14\u5D1B\u5DDD\u5DDE\u5E26\u5E2D\u5E2E\u5E45\u5E55\u5EB7\u5EC9\u5ECA\u5ED6\u5F39\u5F3A\u5F62\u5FA1\u5FCD\u5FE0\u5FF5\u603B\u6094\u6101\u613F\u6155\u6170\u618B\u61D2\u622A\u633A\u636E\u6377\u6380\u63E1\u63ED\u63F4\u642C\u642D\u643A\u6469\u6478\u6491\u6492\u64BC\u64C5\u64CD\u64CE\u64E6\u652F\u6559\u65A4\u65D7\u662F\u664B\u6682\u66A7\u66A8\u66B4\u66DD\u67AA\u67AB\u67B6\u67DC\u67E5\u6821\u6876\u68A6\u68AF\u68B0\u68C0\u68D2\u68EE\u6905\u695A\u699C\u69DB\u69FD\u6A21\u6A2A\u6B32\u6B8A\u6B8B\u6B96\u6BB5\u6BEB\u6C1B\u6C57\u6C7D\u6C88\u6C89\u6CAA\u6CAB\u6D0B\u6D32\u6D9B\u6DD8\u6DE1\u6E05\u6E10\u6E17\u6E20\u6E21\u6E90\u6EAA\u6EDA\u6EF4\u6F20\u6F2B\u6F47\u6F6E\u6F84\u6FA1\u6FB3\u6FC0\u704C\u707E\u707F\u7126\u714C\u716E\u718A\u71AC\u71C3\u71D5\u71E5\u7206\u7272\u7279\u727A\u72C2\u72D0\u72D7\u72E0\u730E\u731B\u731C\u739B\u73BB\u73CD\u73E0\u73ED\u7433\u7434\u745E\u7470\u7483\u74DC\u74E6\u74F6\u74F7\u7528\u7529\u7545\u754C\u7559\u7574\u7586\u764C\u76AE\u771F\u7720\u7747\u7750\u778E\u77DB\u780D\u7840\u7855\u789F\u78A7\u78B0\u78C1\u78E8\u7948\u7956\u795D\u795E\u7977\u7978\u7981\u798F\u79DF\u79FB\u7A1A\u7A33\u7A3F\u7A46\u7ACB\u7AEF\u7AF9\u7B49\u7B97\u7BA1\u7BC7\u7BEE\u7C4D\u7C73\u7C7B\u7C89\u7CA5\u7CAE\u7CCA\u7CFB\u7E41\u7EF4\u7F06\u7F29\u7F62\u7FBD\u7FC5\u7FD4\u7FE0\u8017\u806A\u8131\u8170\u818A\u819C\u81A8\u81C2\u81E3\u821E\u8292\u829D\u82E5\u82E6\u82F1\u82F9\u8303\u8304\u832B\u8336\u8349\u8350\u836F\u8377\u8389\u839E\u83DC\u83E9\u83F2\u8404\u841D\u843D\u848B\u8499\u84B8\u84C4\u84DD\u8513\u8521\u852B\u852C\u853D\u8549\u859B\u85AA\u85CF\u865A\u866B\u868A\u86EE\u8702\u878D\u8840\u884C\u8857\u8870\u8881\u888B\u8896\u88E4\u88F8\u88F9\u89D2\u8A00\u8A89\u8B66\u8C46\u8C61\u8C6A\u8C6B\u8C8C\u8DB3\u8DC3\u8DE8\u8E0F\u8E22\u8E29\u8E2A\u8E48\u8E6D\u8EAB\u8EB2\u8EBA\u8FB1\u9065\u906D\u9075\u907F\u9080\u9093\u90DD\u90FD\u9119\u915D\u916C\u917F\u9192\u9274\u946B\u9488\u94DC\u94DD\u94ED\u9519\u952E\u953B\u9547\u955C\u957F\u961F\u9676\u9677\u9686\u969C\u96A7\u96B6\u96F6\u96F7\u9732\u9769\u978B\u98CE\u9910\u99A8\u9AD8\u9C9C\u9E2D\u9E3F\u9E4F\u9E70\u9EA6\u9EC4\u9ED8\u9F13\u9F20\u9F3B\u9F50",
            [0x4E00, 0x4E66], [0x4E70, 0x4E73], [0x4E86, 0x4EB2], [0x4EBA, 0x4ED9],
            [0x4EE3, 0x4F01], [0x4F0A, 0x4F3C], [0x4F4D, 0x4F62], [0x4F88, 0x4F8B],
            [0x4F9B, 0x4FB5], [0x4FBF, 0x4FCA], [0x4FD7, 0x4FE1], [0x4FE9, 0x4FF1],
            [0x4FFA, 0x4FFE], [0x500D, 0x5012], [0x5019, 0x5021], [0x503A, 0x503E],
            [0x505A, 0x505C], [0x507F, 0x5085], [0x50A8, 0x50B2], [0x513F, 0x515A],
            [0x5165, 0x517D], [0x5185, 0x5192], [0x5199, 0x51A0], [0x51AC, 0x51B7],
            [0x51C0, 0x51D1], [0x51DD, 0x51E4], [0x51ED, 0x520A], [0x5212, 0x523B],
            [0x524D, 0x5251], [0x5267, 0x5272], [0x529B, 0x52B3], [0x52C7, 0x52C9],
            [0x52FE, 0x5306], [0x5316, 0x5319], [0x5339, 0x5378], [0x5382, 0x538C],
            [0x5395, 0x539F], [0x53A6, 0x53A8], [0x53BB, 0x53DB], [0x53E3, 0x541B],
            [0x5426, 0x5450], [0x5457, 0x5468], [0x5473, 0x5475], [0x547C, 0x5481],
            [0x548B, 0x5496], [0x54A7, 0x54B8], [0x54C0, 0x54D2], [0x54DF, 0x54F2],
            [0x5507, 0x5509], [0x5510, 0x5514], [0x552E, 0x5531], [0x5543, 0x554A],
            [0x5561, 0x5566], [0x5582, 0x558A], [0x55B7, 0x55BD], [0x55EF, 0x55F2],
            [0x5609, 0x560E], [0x5632, 0x5634], [0x563B, 0x563F], [0x5662, 0x566A],
            [0x5676, 0x567B], [0x56DB, 0x56FE], [0x5706, 0x5708], [0x571F, 0x5728],
            [0x5730, 0x5733], [0x573A, 0x5740], [0x5747, 0x5766], [0x5782, 0x5784],
            [0x57CB, 0x57CE], [0x5802, 0x5806], [0x5851, 0x585E], [0x5883, 0x5885],
            [0x5899, 0x589F], [0x58EB, 0x58F3], [0x5904, 0x590F], [0x5916, 0x591F],
            [0x5927, 0x593A], [0x5947, 0x5957], [0x5960, 0x5965], [0x5973, 0x599E],
            [0x59A8, 0x59BB], [0x59C6, 0x59DC], [0x59E8, 0x59EC], [0x59FB, 0x5A03],
            [0x5A18, 0x5A1F], [0x5A31, 0x5A36], [0x5AC9, 0x5ACC], [0x5B50, 0x5B69],
            [0x5B81, 0x5B8F], [0x5B97, 0x5BAB], [0x5BB3, 0x5BD3], [0x5BDD, 0x5BDF],
            [0x5BF8, 0x5C1D], [0x5C2C, 0x5C55], [0x5C97, 0x5C9B], [0x5CA9, 0x5CB8],
            [0x5D29, 0x5D2D], [0x5DE5, 0x5DF4], [0x5DFE, 0x5E1D], [0x5E38, 0x5E3D],
            [0x5E72, 0x5E9F], [0x5EA6, 0x5EAD], [0x5EF6, 0x5F15], [0x5F1F, 0x5F26],
            [0x5F2F, 0x5F31], [0x5F52, 0x5F55], [0x5F69, 0x5F71], [0x5F79, 0x5F98],
            [0x5FAA, 0x5FAE], [0x5FB7, 0x5FC6], [0x5FD7, 0x5FD9], [0x5FE7, 0x5FEB],
            [0x5FFD, 0x6001], [0x600E, 0x602A], [0x604B, 0x6052], [0x6062, 0x607C],
            [0x6084, 0x608D], [0x609F, 0x60B2], [0x60C5, 0x60CA], [0x60D1, 0x60D5],
            [0x60DC, 0x60E0], [0x60E7, 0x60F9], [0x6108, 0x610F], [0x611F, 0x6124],
            [0x6148, 0x614E], [0x6162, 0x6168], [0x61BE, 0x61C2], [0x620F, 0x621A],
            [0x6234, 0x6237], [0x623F, 0x6258], [0x6263, 0x628A], [0x6291, 0x629B],
            [0x62A2, 0x62BD], [0x62C5, 0x6309], [0x6311, 0x6316], [0x6321, 0x632F],
            [0x6349, 0x6355], [0x635E, 0x6367], [0x6388, 0x6398], [0x63A2, 0x63AA],
            [0x63CF, 0x63D2], [0x641C, 0x641E], [0x6444, 0x6447], [0x6454, 0x6458],
            [0x649E, 0x64A4], [0x64AD, 0x64B0], [0x6536, 0x6551], [0x6562, 0x6574],
            [0x6587, 0x659C], [0x65AD, 0x65B0], [0x65B9, 0x65CF], [0x65E0, 0x65ED],
            [0x65F6, 0x65FA], [0x6602, 0x6614], [0x661F, 0x6628], [0x663E, 0x6643],
            [0x6652, 0x665A], [0x6668, 0x667A], [0x6691, 0x6697], [0x66F0, 0x6700],
            [0x6708, 0x670D], [0x6717, 0x671F], [0x6728, 0x6746], [0x674E, 0x6751],
            [0x675C, 0x6770], [0x677E, 0x6784], [0x6790, 0x679D], [0x67D0, 0x67D4],
            [0x67EF, 0x67F3], [0x6807, 0x6811], [0x6837, 0x6851], [0x6863, 0x6865],
            [0x6881, 0x6885], [0x68C9, 0x68CB], [0x690D, 0x6912], [0x697C, 0x6982],
            [0x6B20, 0x6B27], [0x6B3A, 0x6B3E], [0x6B49, 0x6B4C], [0x6B62, 0x6B6A],
            [0x6B79, 0x6B7B], [0x6BBF, 0x6BC1], [0x6BCD, 0x6BDB], [0x6C0F, 0x6C14],
            [0x6C34, 0x6C38], [0x6C41, 0x6C49], [0x6C5F, 0x6C70], [0x6C99, 0x6CA1],
            [0x6CB3, 0x6CCC], [0x6CD5, 0x6CF3], [0x6CFC, 0x6D01], [0x6D12, 0x6D1E],
            [0x6D25, 0x6D2A], [0x6D3B, 0x6D5C], [0x6D66, 0x6D77], [0x6D82, 0x6D89],
            [0x6DA6, 0x6DA8], [0x6DAF, 0x6DB5], [0x6DEB, 0x6DFB], [0x6E29, 0x6E38],
            [0x6E56, 0x6E58], [0x6E7E, 0x6E83], [0x6ECB, 0x6ED1], [0x6EE1, 0x6EE8],
            [0x6F02, 0x6F06], [0x6F0F, 0x6F14], [0x6F58, 0x6F5C], [0x706B, 0x7075],
            [0x708E, 0x7092], [0x70AB, 0x70AE], [0x70B8, 0x70C8], [0x70DF, 0x70ED],
            [0x7130, 0x7136], [0x7164, 0x7167], [0x7199, 0x719F], [0x722A, 0x723D],
            [0x7247, 0x724C], [0x7259, 0x7269], [0x72AC, 0x72AF], [0x72B6, 0x72B9],
            [0x72EC, 0x72F1], [0x72F8, 0x72FC], [0x732A, 0x7334], [0x7384, 0x738B],
            [0x73A9, 0x73B2], [0x7403, 0x7406], [0x7518, 0x751F], [0x7530, 0x753B],
            [0x7565, 0x756A], [0x7591, 0x7597], [0x75AB, 0x75B2], [0x75BC, 0x75BE],
            [0x75C5, 0x75C7], [0x75D2, 0x75DB], [0x75F4, 0x75F9], [0x7624, 0x7626],
            [0x767B, 0x7687], [0x76C6, 0x76DF], [0x76EE, 0x7701], [0x7709, 0x770B],
            [0x773C, 0x7740], [0x775B, 0x7763], [0x77A7, 0x77AC], [0x77E3, 0x77F3],
            [0x77FF, 0x7801], [0x7814, 0x7816], [0x7834, 0x7838], [0x786C, 0x786E],
            [0x788C, 0x7897], [0x793A, 0x793E], [0x7965, 0x7968], [0x79BB, 0x79C1],
            [0x79CB, 0x79D8], [0x79E6, 0x79F0], [0x7A0B, 0x7A0E], [0x7A74, 0x7A81],
            [0x7A97, 0x7A9D], [0x7AD9, 0x7AE5], [0x7B11, 0x7B14], [0x7B26, 0x7B2C],
            [0x7B51, 0x7B5B], [0x7B79, 0x7B80], [0x7BAD, 0x7BB1], [0x7C92, 0x7C98],
            [0x7CB9, 0x7CBE], [0x7CD5, 0x7CDF], [0x7D20, 0x7D2F], [0x7EA0, 0x7EDF],
            [0x7EE7, 0x7EED], [0x7EFC, 0x7EFF], [0x7F13, 0x7F20], [0x7F34, 0x7F3A],
            [0x7F51, 0x7F5A], [0x7F6A, 0x7F72], [0x7F8A, 0x7F8E], [0x7F9E, 0x7FA4],
            [0x7FFB, 0x8005], [0x800C, 0x8010], [0x8033, 0x803D], [0x804A, 0x804C],
            [0x8054, 0x805A], [0x8083, 0x808C], [0x8096, 0x80B2], [0x80BA, 0x80CE],
            [0x80D6, 0x80E1], [0x80F3, 0x8106], [0x810F, 0x811A], [0x8138, 0x813E],
            [0x814A, 0x8150], [0x8179, 0x8180], [0x81EA, 0x81F4], [0x8205, 0x8214],
            [0x822A, 0x822C], [0x8236, 0x8239], [0x826F, 0x8273], [0x827A, 0x8282],
            [0x82AC, 0x82B3], [0x82CD, 0x82D7], [0x8361, 0x8363], [0x83AB, 0x83B7],
            [0x83CA, 0x83CC], [0x840C, 0x840E], [0x8425, 0x8428], [0x8457, 0x8463],
            [0x8584, 0x8587], [0x864E, 0x8651], [0x8679, 0x8682], [0x86C7, 0x86CB],
            [0x86D9, 0x86DB], [0x8718, 0x871C], [0x8774, 0x8776], [0x8861, 0x8868],
            [0x88AB, 0x88AD], [0x88C1, 0x88C5], [0x88D5, 0x88D9], [0x897F, 0x8986],
            [0x89C1, 0x89C9], [0x89E3, 0x89E6], [0x8BA1, 0x8BE6], [0x8BED, 0x8C13],
            [0x8C22, 0x8C2D], [0x8C34, 0x8C37], [0x8D1D, 0x8D44], [0x8D4B, 0x8D64],
            [0x8D70, 0x8D77], [0x8D81, 0x8D8B], [0x8D9F, 0x8DA3], [0x8DCC, 0x8DD1],
            [0x8DDD, 0x8DDF], [0x8DEF, 0x8DF5], [0x8F66, 0x8F74], [0x8F7B, 0x8F89],
            [0x8F90, 0x8F93], [0x8F9B, 0x8FA9], [0x8FB9, 0x8FDF], [0x8FEA, 0x8FF0],
            [0x8FF7, 0x9022], [0x9038, 0x9057], [0x90A3, 0x90C1], [0x90CA, 0x90D1],
            [0x90E8, 0x90ED], [0x914D, 0x9152], [0x9176, 0x9178], [0x9189, 0x918B],
            [0x91C7, 0x91D1], [0x9493, 0x94A5], [0x94AE, 0x94B1], [0x94BB, 0x94C3],
            [0x94F6, 0x950B], [0x9521, 0x9526], [0x95E8, 0x9605], [0x9610, 0x9614],
            [0x9631, 0x9655], [0x9662, 0x966A], [0x968F, 0x9694], [0x96BE, 0x96C6],
            [0x96E8, 0x96EA], [0x96FE, 0x9700], [0x9707, 0x970D], [0x971C, 0x971E],
            [0x9752, 0x9762], [0x97E6, 0x97E9], [0x97F3, 0x97F5], [0x9875, 0x9888],
            [0x9891, 0x989D], [0x98D8, 0x98DF], [0x996D, 0x9972], [0x997C, 0x997F],
            [0x9986, 0x9988], [0x9992, 0x9999], [0x9A6C, 0x9A84], [0x9A8C, 0x9A9A],
            [0x9AA4, 0x9AA8], [0x9B3C, 0x9B45], [0x9B4F, 0x9B54], [0x9C7C, 0x9C81],
            [0x9E1F, 0x9E23], [0x9EBB, 0x9EBD], [0x9ECE, 0x9ED1], [0x9F7F, 0x9F84],
            [0x9F99, 0x9F9F]
        ]
    })
}

Main

text_input.qml file defines the application UI. It includes six CustomTextField items.

CustomTextField {
    width: parent.width
    placeholderText: "One line field"
    enterKeyAction: EnterKeyAction.Next
    onAccepted: upperCaseField.focus = true
}
CustomTextField {
    // ### FIXME - the ShiftKey in default style should get
    // StyleConfig.capsLockKeyAccentColor color. But state change
    // for some reason is not triggered in ShiftKeyPanel.qml, even
    // when InputContext.capsLockActive == true. Bug in 'state'
    // handling system?
    id: upperCaseField
    width: parent.width
    placeholderText: "Upper case field"
    inputMethodHints: Qt.ImhUppercaseOnly
    enterKeyAction: EnterKeyAction.Next
    onAccepted: lowerCaseField.focus = true
}
CustomTextField {
    id: lowerCaseField
    width: parent.width
    placeholderText: "Lower case field"
    inputMethodHints: Qt.ImhLowercaseOnly
    enterKeyAction: EnterKeyAction.Next
    onAccepted: phoneNumberField.focus = true
}
CustomTextField {
    id: phoneNumberField
    width: parent.width
    placeholderText: "Phone number field"
    inputMethodHints: Qt.ImhDialableCharactersOnly
    enterKeyAction: EnterKeyAction.Next
    onAccepted: formattedNumberField.focus = true
}
CustomTextField {
    id: formattedNumberField
    width: parent.width
    placeholderText: "Formatted number field"
    inputMethodHints: Qt.ImhFormattedNumbersOnly
    enterKeyAction: EnterKeyAction.Next
    onAccepted: digitsField.focus = true
}
CustomTextField {
    id: digitsField
    width: parent.width
    placeholderText: "Digits only field"
    inputMethodHints: Qt.ImhDigitsOnly
    enterKeyAction: EnterKeyAction.Search
    enterKeyEnabled: digitsField.text.length > 5
    onAccepted: {
        textAreaTextItem.text = textAreaTextItem.text + "\n" + digitsField.text
        digitsField.clear()
    }

Each CustomTextField sets a different inputMethodHints. It sets onAccepted signal handler to control when each CustomTextField gets active focus. It also sets EnterKeyAction.actionId to modify Qt Quick Ultralite Virtual Keyboard enter key.

text_input.qml imports QtQuick.VirtualKeyboard module and initializes InputPanel to enable Qt Quick Ultralite Virtual Keyboard in the application.

InputPanel {
    id: keyboard
    anchors.horizontalCenter: parent.horizontalCenter
    width: StyleConstants.vkbScreenWidth
    y: yPositionWhenHidden
    property real yPositionWhenHidden: parent.height
}

Note: Qt Quick Ultralite depends on vkbScreenWidth property to set the width of Qt Quick Ultralite Virtual Keyboard. See Virtual Keyboard Scaling for more information.

CustomTextField

This Qml component is used by Main defines the interface for TextInput Qml item and its Text child Qml item in the application.

import QtQuick
import QtQuick.VirtualKeyboard

Rectangle {
    id: root

    height: xGlyphMetrics.height * 1.6
    Text {
        id: xGlyphMetrics
        font: textFieldFont
        text: "X"
        visible: false
    }

    property string placeholderText: "placeholder"
    property int enterKeyAction: EnterKeyAction.None
    property bool enterKeyEnabled: true
    property bool focus: false

    property alias inputMethodHints: control.inputMethodHints
    property alias text: control.text

    signal accepted

    function clear() { control.clear() }

    color: control.activeFocus ? "darkblue" : "lightgrey"

    onFocusChanged: {
        if (root.focus)
            control.forceActiveFocus()
    }

    readonly property int textFieldFontPixelSize: 20
    readonly property font textFieldFont: Qt.font({
        // static font engine optimization:
        // Using the same font configuration for text input field as used by the keyboard style
        // so we can avoid bundling 2 sets of Chinese glyphs (one for each font configuration).
        // See PinyinSupport.qml
        pixelSize: StyleConstants.wordSuggestionSize * StyleConstants.scaleHint,
          unicodeCoverage: [
           " !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~¡¢£¥§ª«®·º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÑÒÓÔÕÖ×ØÙÚÛÜÝßàáâãäåæçèéêëìíîïñòóôõö÷øùúûüýÿĂăĄąĆćĊċČčĎďĐđĒēĖėĘęĚěĜĝĞğĠġĢģĨĩĪīĮįıĹĺĻļĽľĿŀŁłŃńŅņŇňŐőŒœŔŕŘřŚśŞşŠšŢţŤťŦŧŨũŪūŮůŰűŶŷŸŹźŻżŽžƠơƯưǼǽǾǿȘșȚț́̈ΆΈΉΊΌΎΏΐΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩΪΫάέήίΰαβγδεζηθικλμνξοπρςστυφχψωϊϋόύώЁЂЄЅІЇЈЉЊЋЏАБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмнопрстуфхцчшщъыьэюяёђєѕіїјљњћџҐґẠạẢảẤấẦầẨẩẪẫẬậẮắẰằẲẳẴẵẶặẸẹẺẻẼẽẾếỀềỂểỄễỆệỈỉỊịỌọỎỏỐốỒồỔổỖỗỘộỚớỜờỞởỠỡỢợỤụỦủỨứỪừỬửỮữỰựỲỳỴỵỶỷỸỹ—“”…₫€₴₺™⅓⅞←↑→↓√␣■□◆◇○●★☆⚙、。〈〉《》「」『』【】〔〕！（），．／：；？＼～￥"
          ]
    })

    Rectangle {
        id: background
        color: "#E3F2FD"
        anchors.fill: parent
        anchors.margins: 2 // Padding inside the border
    }

    TextInput {
        id: control
        anchors.fill: background
        anchors.margins: 4 // Keep padding between text and background
        implicitHeight: textFieldFontPixelSize + 8

        font: textFieldFont
        onAccepted: {
            root.accepted()
        }

        EnterKeyAction.actionId: enterKeyAction
        EnterKeyAction.enabled: enterKeyEnabled

        Text {
            anchors.centerIn: parent
            font: textFieldFont
            text: placeholderText
            opacity: 0.2
            visible: control.text.length === 0
        }
    }
}

Available under certain Qt licenses.
Find out more.