Поле ввода

Элемент input представляет собой поле для ввода текста. Имеет те же свойства, что и элемент text, а также несколько отдельных свойств:

• hint_text — текст подсказки, который будет отображаться в пустом поле ввода.
• hint_color — цвет подсказки.
• highlight_color — цвет выделения текста. Если значение не задано, будет использован цвет, установленный на клиенте.
• native_interface — объект. Содержит единственное поле color — цвет линии под текстом в поле ввода.
• keyboard_type — тип клавиатуры. Поддерживаются следующие типы (по умолчанию: multi_line_text):
  • single_line_text
  • multi_line_text
  • phone
  • number
  • email
  • uri
  • password
• select_all_on_focus — выделение введенного текста при получении фокуса.
• mask — маска для ввода текста по заданному шаблону.
• validators — валидатор, который проверяет значение поля на соответствие заданным условиям.

Маска

Текст с фиксированным количеством символов

Для настройки используются поля:

• always_visible — включает отображение маски в пустом поле ввода.
• raw_text_variable — переменная, в которой хранится необработанный пользовательский ввод.
• pattern — строка, которая задает шаблон для ввода текста. Например, для телефонного номера можно использовать шаблон +7 (###) ###-##-## .
• pattern_elements — массив, описывающий символы, вместо которых может быть подставлен пользовательский ввод.
  • key — элемент, вместо которого должен быть подставлен пользовательский ввод. В примере с номером нужно расшифровать символ #.
  • placeholder — символ или строка, которые будут отображаться в пустом поле ввода.
  • regex — регулярное выражение для валидации вводимого символа.

Подробное описание параметров маски с фиксированным количеством символов приведено в справочнике элементов.

"mask": {
    "type": "fixed_length",
    "pattern": ...,
    "raw_text_variable": ...,
    "pattern_elements": [
        {
            "key": ... ,
            "regex": ... ,
            "placeholder": ...
        }
    ],
    "always_visible": ...
}

Валютные значения в заданном региональном формате

Для настройки используются поля:

• raw_text_variable — переменная, в которой хранится необработанный пользовательский ввод.
• locale — тег языка по стандарту IETF BCP 47, которому должен соответствовать формат валюты. Если язык не задан, он будет определен автоматически.

Маска автоматически форматирует вводимые значения в соответствии с региональными настройками, поддерживает ввод чисел с максимум двумя знаками после запятой и валидирует ввод по шаблону.

Подробное описание параметров маски для валютных значений приведено в справочнике элементов.

"mask": {
    "type": "currency",
    "raw_text_variable": ... ,
    "locale": ...
}

Номера телефонов c динамическим определением регионального формата

Для настройки используются поля:

• always_visible — включает отображение маски в пустом поле ввода.
• raw_text_variable — переменная, в которой хранится необработанный пользовательский ввод.

Подробное описание параметров маски для номеров телефонов приведено в справочнике элементов.

"mask": {
    "type": "phone",
    "raw_text_variable": ...,
    "always_visible": ...
}

Поведение клавиатуры

Нажатие вне поля ввода при открытой клавиатуре закроет клавиатуру.

Валидаторы

На основе регулярных выражений

Для настройки используются поля:

• pattern— регулярное выражение, которому должно соответствовать значение поля.
• allow_empty — определяет, является ли пустое поле корректным.
• label_id — ID текстового элемента, который содержит сообщение об ошибке. Также будет использовано для поддержки доступности.
• variable — имя переменной, в которой хранится результат вычисления выражения.

Подробное описание параметров валидатора на основе регулярных выражений приведено в справочнике элементов.

{
    "type": "regex",
    "pattern": "^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$",
    "allow_empty": false,
    "label_id": "email_validation_error",
    "variable": "email_input"
}

На основе вычисляемых выражений DivKit

Для настройки используются поля:

• pattern— вычисляемое выражение для определения корректности значения поля.
• allow_empty — определяет, является ли пустое поле корректным.
• label_id — ID текстового элемента, который содержит сообщение об ошибке. Также будет использовано для поддержки доступности.
• variable — имя переменной, в которой хранится результат вычисления выражения.

Подробное описание параметров валидатора на основе вычисляемых выражений приведено в справочнике элементов.

"validators": [
    {
        "type": "expression",
        "condition": ...,
        "allow_empty": ...,
        "label_id": ...,
        "variable": ...
    }
]

Узнать больше

Вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: https://t.me/divkit_community_ru.

Репозиторий DivKit