Поля ввода в уведомлениях

Библиотека iziToast поддерживает создание интерактивных уведомлений с полями ввода, что позволяет пользователю напрямую взаимодействовать с уведомлением без необходимости перехода на отдельную страницу или модальное окно. Основной механизм реализации полей ввода в iziToast заключается в использовании параметра inputs, который принимает массив объектов, описывающих каждый элемент формы.

Структура объекта поля ввода

Каждое поле ввода описывается объектом со следующими ключевыми свойствами:

  • type – тип поля ввода (text, password, email, number, textarea, select).
  • placeholder – текст-подсказка, отображаемый в поле, пока пользователь не ввёл значение.
  • id – уникальный идентификатор поля для последующего получения значения.
  • value – начальное значение поля (необязательно).
  • class – дополнительные CSS-классы для стилизации.
  • options – массив объектов для поля типа select, где каждый объект имеет label и value.
  • required – логическое значение, определяющее обязательность заполнения.

Пример создания уведомления с двумя полями ввода:

iziToast.show({
    title: 'Вход в систему',
    message: 'Введите логин и пароль',
    inputs: [
        ['<input type="text" placeholder="Логин" id="username">', 'focus'],
        ['<input type="password" placeholder="Пароль" id="password">', '']
    ],
    buttons: [
        ['<button>Войти</button>', function (instance, toast) {
            let username = document.getElementById('username').value;
            let password = document.getElementById('password').value;
            console.log('Логин:', username, 'Пароль:', password);
            instance.hide({transitionOut: 'fadeOut'});
        }, true]
    ]
});

Управление фокусом и событиями

Для удобства пользователя можно задавать начальный фокус на определённое поле. В массиве inputs второй элемент подмассива отвечает за атрибут фокуса:

  • 'focus' – поле получает фокус при отображении уведомления.
  • '' – поле отображается без автоматического фокуса.

Кроме того, к каждому полю ввода можно привязывать стандартные события JavaScript, такие как input, change или keydown, напрямую через DOM-методы после генерации уведомления.

Валидация данных

Для проверки корректности введённых данных чаще всего используется событие нажатия на кнопку уведомления. Доступ к полям осуществляется через document.getElementById по id. Простейшая проверка на заполнение выглядит так:

buttons: [
    ['<button>Отправить</button>', function (instance, toast) {
        let email = document.getElementById('email').value;
        if (!email) {
            iziToast.error({message: 'Поле Email не может быть пустым'});
            return false;
        }
        instance.hide({transitionOut: 'fadeOut'});
    }, true]
]

Поля типа select и textarea

Для создания выпадающих списков используется тег <select> с опциями:

inputs: [
    ['<select id="role"><option value="user">Пользователь</option><option value="admin">Администратор</option></select>', 'focus']
]

Для многострочного текста применяют <textarea>:

inputs: [
    ['<textarea id="comments" placeholder="Ваши комментарии"></textarea>', 'focus']
]

Стилизация полей ввода

Каждое поле можно стилизовать через класс CSS, передаваемый в объекте class. Пример:

['<input type="text" id="name" class="izi-input-custom" placeholder="Имя">', 'focus']

Где .izi-input-custom может содержать любые свойства CSS, например:

.izi-input-custom {
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 5px 10px;
    width: 100%;
}

Динамическое управление уведомлением

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

document.getElementById('username').value = 'Новый логин';

Также возможна программная очистка полей после успешной отправки данных:

document.getElementById('username').value = '';
document.getElementById('password').value = '';

Особенности использования

  • Поля ввода в iziToast не создают отдельной формы в DOM, поэтому стандартная отправка через <form> невозможна. Все действия должны обрабатываться через события кнопок или внешние функции.
  • Не рекомендуется создавать более 3–4 полей ввода в одном уведомлении, чтобы не нарушать компактность и читаемость UI.
  • Важно учитывать адаптивность: поля ввода автоматически растягиваются по ширине уведомления, но при больших размерах экрана можно применять собственные CSS-классы для ограничения ширины.

Эти возможности позволяют интегрировать полнофункциональные интерактивные уведомления с вводом данных прямо в интерфейс приложения, сокращая количество модальных окон и улучшая пользовательский опыт.

Оглавление