Текстовое поле ввода TextField

К одним из наиболее используемых элементов относятся текстовые поля ввода. Для создания однострочного текстового поля применяется элемент TextField из пакета "QtQuick.Controls". Простейшее текстовое поле:

import QtQuick
import QtQuick.Controls

Window {
    width: 250
    height: 200
    visible: true
    title: "METANIT.COM"

    Column{
        anchors.fill: parent
        padding: 10
        TextField {
            width: 160
            height: 25
            text: "Hello World"
        }
    }
}

Основную часть функционала, связанного с вводом текста, элемент TextField наследует от типа TextInput. Рассмотрим основные возможности TextField.

Установка шрифта

Для настройки шрифта применяется ряд свойств:

• color: устанавливает цвет текста

• font.bold: устанавливает выделение жирным при значении true

• font.capitalization: устанавливает режим перевода в верхний регистр. Возможные значения:

  • Font.MixedCase: регистр символов не изменяется

  • Font.AllUppercase: весь текст переводится в верхний регистр

  • Font.AllLowercase: весь текст переводится в нижний регистр

  • Font.SmallCaps: текст отображается прописными буквами

  • Font.Capitalize: первая буква каждого слова переводится в верхний регистр

• font.family: устанавливает применяемое семейство шрифтов

• font.italic: устанавливает выделение курсивом при значении true

• font.letterSpacing: устанавливает отступы между буквами

• font.pixelSize: устанавливает высоту шрифта в пикселях

• font.pointSize: устанавливает высоту шрифта в точках

• font.strikeout: устанавливает зачеркивание текста при значении true

• font.styleName: устанавливает имя стиля шрифта

• font.underline: устанавливает подчеркивание текста при значении true

• font.weight: устанавливает вес текста

• font.wordSpacing: устанавливает отступы между словами

Применение некоторых свойств:

import QtQuick
import QtQuick.Controls

Window {
    width: 250
    height: 200
    visible: true
    title: "METANIT.COM"

    Column{
        anchors.fill: parent
        padding: 10
        TextField {
            width: 200
            height: 25
            color: "navy"
            text: "Hello world"
            font.family: "Verdana"
            font.pixelSize: 16
            font.capitalization: Font.Capitalize
        }
    }
}

Получение введенного текста

Для управления введенным и отображаемым текстом поле TextField предоставляет три свойства:

• text: собственно введенный текст

• placeholderText: приглашение к вводу, которое отображается при отсутствии текста

Например, получим введенный текст по нажатию на кнопку:

import QtQuick
import QtQuick.Controls

Window {
    width: 250
    height: 200
    visible: true
    title: "METANIT.COM"

    Column{
        anchors.fill: parent
        padding: 10
        spacing: 10
        TextField {
            id: input
            width: 200
            height: 25
            placeholderText: "Введите текст"
            font.family: "Verdana"
            font.pixelSize: 16
        }
        Button{
            width: 80
            height: 25
            text: "Click"
            onClicked: {
                output.text = input.text
            }
        }
        Text{
            id: output
        }
    }
}

Здесь по нажатию на кнопку текст, введенный в текстовое поле ввода, выводится в элементе Text. Для обращения к этим элементам им назначены идентиикаторы с помощью свойства id

Режим ввода текста

Свойство echoMode позволяет задать режим ввода текста и обычно применяется при вводе пароля или каких-то чуствительных данных, которые нажо визуально скрыть при вводе. Это свойство может принимать следующие значения:

• TextInput.Normal: отображает текст как он введен в текстовое поле

• TextInput.Password: отображает символ маски, который скрывает введенный символ (символ маски зависит от платформы)

• TextInput.NoEcho: ничего не делает

• TextInput.PasswordEchoOnEdit: во время ввода отображает символы как есть, а после завершения ввода скрывает с помощью маски аналогично TextInput.Password

Причем через свойство text мы также сможем получить введенный текст:

import QtQuick
import QtQuick.Controls

Window {
    width: 250
    height: 200
    visible: true
    title: "METANIT.COM"

    Column{
        anchors.fill: parent
        padding: 10
        spacing: 10
        TextField {
            id: input
            width: 200
            height: 25
            placeholderText: "Введите текст"
            echoMode: TextInput.Password  // применяем маску при вводе
            font.family: "Verdana"
            font.pixelSize: 16
        }
        Button{
            width: 80
            height: 25
            text: "Click"
            onClicked: {
                output.text = input.text
            }
        }
        Text{
            id: output
        }
    }
}

Дополнительно с помощью свойства passwordCharacter можно задать символ маски, если, к примеру, стандартные точки не устраивают. Например, зададим символ "!"

TextField {
    id: input
    width: 200
    height: 25
    placeholderText: "Введите пароль"
    echoMode: TextInput.Password  // применяем маску при вводе
    passwordCharacter: "!"      // символ маски
    font.family: "Verdana"
    font.pixelSize: 16
}

Определение маски ввода

Свойство inputMask позволяет задать маску ввода. Маска может применяться для автоматической валидации ввода. Для создания маски могут применяться следующие символы:

Символ	Значение
A	обязательный алфавитный символ
a	разрешенный, но необязательный алфавитный символ
N	обязательный алфавитно-цифровой символ
n	разрешенный, но необязательный алфавитно-цифровой символ
X	обязательный символ, который не является пробелом
x	разрешенный, но необязательный символ, который не является пробелом
9	обязательный цифровой символ
0	разрешенный, но необязательный цифровой симво.
D	обязательный цифровой символ, который больше 0
d	разрешенный, но необязательный цифровой символ, который больше 0
#	разрешенный, но необязательный цифровой символ или символ "+"/"-"
H	обязательный шестнадцатеричный цифровой символ (например, A-F, a-f, 0-9).
h	разрешенный, но необязательный шестнадцатеричный цифровой символ
B	обязательный двоичный цифровой символ, например, 0-1.
b	разрешенный, но необязательный двоичный цифровой символ
<	все последующие алфавитные символы в нижнем регистре
!	отключает преобразование регистра.

Например, установим маску для ввода текста:

import QtQuick
import QtQuick.Controls

Window {
    width: 250
    height: 200
    visible: true
    title: "METANIT.COM"

    Column{
        anchors.fill: parent
        padding: 10
        spacing: 10
        TextField {
            id: input
            width: 200
            height: 25
            placeholderText: "Введите номер телефона"
            font.family: "Verdana"
            font.pixelSize: 16

            inputMask: "+9(999)-999-9999"
        }
        Button{
            width: 80
            height: 25
            text: "Click"
            onClicked: {
                output.text = input.text
            }
        }
        Text{
            id: output
        }
    }
}

В данном случае применяется маска "+9(999)-999-9999", то есть нам надо обязательно ввести 11 цифр (символ "9" подразумевает обязательный ввод цифрового символа). Для больше понимания я определил вывод введенного текста в элемент Text по нажатию кнопки. В частности, мы можем увидеть, что в него также попадают дополнительные символы маски, как символы "+", "(", ")" и "-" в примере выше:

Если символы не являются цифровыми, то их нельзя будет ввести.

Если мы хотим, чтобы номер телефона начинался с какой-то конкретной цифры, то ее можно указать:

inputMask:"+7(999)-999-9999"

В данном случае номер всегда будет начинаться с цифры 7. Но что, если мы хотим, чтобы первая цифра телефона всегда представляла цифру 9? Поскольку "9" - это специальный символ, то его надо экранировать:

inputMask:"+\9(999)-999-9999"

Аналогично можно определять и другие маски с помощью других символов.

Максимальное количество символов

Свойство maximumLength устанавливает максимальное количество символов, которые можно ввести в поле. По умолчанию оно равно 32767. Если текст большей длины, то он усекается

TextField {
    width: 200
    height: 25
    text: "Hello World"
    font.family: "Verdana"
    font.pixelSize: 16
    maximumLength: 5    // не более 5 символов
}

Реально введенное количество символов (включая символы маски) можно получить с помощью свойства length

Выделение текста

Для управления выделением текста элемент TextField предоставляет ряд свойств:

• Свойство mouseSelectionMode указывает, как будет выделяться текст, и для этого может принимать одно из двух значений:

  • TextInput.SelectCharacters: можно выделять отдельные символы (значение по умолчанию)

  • TextInput.SelectWords: можно выделять только по словам

  Стоит отметить, что это свойство применяется, если только другое свойство - selectByMouse равно true.

• Свойство persistentSelection указывает, должно ли текстовое поле сохранять выделение текста после потери фокуса. По умолчанию значение false (выделение текста сбрасывается)

• Свойство selectByMouse указывает, можно ли выделять мышью текст. Текст выделяется при значении true, которое является значением по умолчанию

• Свойство selectedText возвращает выделенный текст

• Свойство selectedTextColor устанавливает цвет выделенного текста

• Свойство selectionColor устанавливает цвет фона выделенного текста

Применение некоторых свойств:

import QtQuick
import QtQuick.Controls

Window {
    width: 250
    height: 200
    visible: true
    title: "METANIT.COM"

    Column{
        anchors.fill: parent
        padding: 10
        spacing: 10
        TextField {
            id: input
            width: 200
            height: 25
            font.family: "Verdana"
            font.pixelSize: 16
            persistentSelection: true   // сохраняем выделение после потери фокуса
            selectionColor: "red"       // цвет фона выделения
            selectedTextColor: "yellow" // цвет выделенного текста
        }
        Button{
            width: 80
            height: 25
            text: "Click"
            onClicked: {
                output.text = input.selectedText
            }
        }
        Text{
            id: output
        }
    }
}

В данном случае текст выделяется желтым цветом, а его фон - красным. При потере фокуса сохраняем выделение, а при нажатии на кнопку отображаем выделение в элементе Text:

Установка внешних отступов

Ряд свойств позволяют задать внешние отступы:

• leftInset: отступ слева

• topInset: отступ сверху

• bottomInset: отступ снизу

• rightInset: отступ справа

Применение:

import QtQuick
import QtQuick.Controls

Window {
    width: 250
    height: 200
    visible: true
    title: "METANIT.COM"

    Column{
        anchors.fill: parent

        TextField {
            width: parent.width
            font.family: "Verdana"
            font.pixelSize: 16
            // отступы от краев контейнера
            leftInset:10
            topInset: 10
            bottomInset:10
            rightInset: 8
        }
    }
}

События ввода

При вводе текста возникает ряд событий-сигналов. Прежде всего:

• pressed: возникает при нажатии на текстовое поле и обрабатывается обработчиком onPressed

• released: возникает при уходе с места ввода (на другую позицию в текстовом поле или на ждругой элемент) и обрабатывается обработчиком onReleased

• textEdited: возникает при каждом изменении введенных символов в поле за исключением программного изменения текста и обрабатывается обработчиком onTextEdited

• accepted: возникает при нажатии на Enter или кнопку возврата и обрабатывается обработчиком onAccepted

• editingFinished: возникает при нажатии на Enter или кнопку возврата или при потере фокуса и обрабатывается обработчиком onEditingFinished

Например, при обработаем сигнал released:

import QtQuick
import QtQuick.Controls

Window {
    width: 250
    height: 200
    visible: true
    title: "METANIT.COM"

    Column{
        anchors.fill: parent
        padding: 10
        spacing: 10
        TextField {
            id: input
            width: 200
            height: 25
            font.family: "Verdana"
            font.pixelSize: 16
            onReleased: {output.text = text}
        }
        Text{
            id: output
        }
    }
}

Здесь при завершении ввода текст из поля ввода input копируется в элемент Text.

Методы текстового поля

Для элемента TextField доступен ряд методов, которые позволяют управлять содержимым:

• clear(): очищает текстовое поле

• copy(): копирует выделенный текст в буфер обмена

• cut(): вырезает выделенный текст

• deselect(): отменяет выделение

• string getText(int start, int end): получает текст между определенными индексами

• insert(int position, string text): вставляет текст на определенную позицию

• paste(): вставляет текст из буфера обмена

• redo(): восстанавливает последнее отмененное действие

• remove(int start, int end): удаляет текст между индексами start и end

• select(int start, int end): выделяет текст между индексами start и end

• selectAll(): выделяет весь текст

• selectWord(): выделяет слово, ближайшее к курсору

• undo(): отменяет последнее действие

Например, определим кнопку, которая удаляет введенный текст:

import QtQuick
import QtQuick.Controls

Window {
    width: 250
    height: 200
    visible: true
    title: "METANIT.COM"

    Column{
        anchors.fill: parent
        padding: 10
        spacing: 10
        TextField {
            id: input
            width: 200
            height: 25
            font.family: "Verdana"
            font.pixelSize: 16
        }
        Button{
            width: 80
            height: 25
            text: "Clear"
            onClicked: { input.clear() }    // удаляем текст
        }
    }
}