Предзаполнение полей

Предзаполнение полей в SweetAlert позволяет задать значения для ввода данных до того, как пользователь начнет взаимодействовать с элементами формы. Эта возможность полезна, например, для отображения заранее подготовленной информации в диалогах, таких как редактирование профиля, подтверждение или автозаполнение при запросах.

SweetAlert поддерживает ввод данных через текстовые поля, и одним из популярных методов является использование опции input. Когда требуется предзаполнить поле значением, нужно указать начальный текст через параметр inputValue. Это позволяет задать значение, которое будет отображаться в поле ввода сразу после открытия модального окна. Пример базового использования:

Swal.fire({
  title: 'Ваше имя',
  input: 'text',
  inputValue: 'Иван',  // Предзаполненное значение
  showCancelButton: true,
  confirmButtonText: 'Подтвердить'
});

В этом примере при открытии модального окна в поле ввода уже будет написано имя “Иван”. Пользователь может либо оставить это значение, либо ввести свое.

Предзаполнение с динамическим значением

Иногда необходимо предзаполнить поле значением, которое определяется динамически, например, из базы данных или состояния приложения. В таких случаях можно использовать переменные или результаты асинхронных запросов. Например, если требуется вывести имя пользователя из профиля:

let userName = getUserNameFromDatabase();  // Функция для получения имени пользователя

Swal.fire({
  title: 'Ваше имя',
  input: 'text',
  inputValue: userName,  // Динамическое значение
  showCancelButton: true,
  confirmButtonText: 'Подтвердить'
});

Здесь переменная userName будет содержать имя, которое будет автоматически вставлено в поле ввода, позволяя пользователю редактировать его, если это необходимо.

Использование нескольких полей ввода с предзаполнением

SweetAlert позволяет использовать несколько полей ввода одновременно в одном модальном окне. Для этого можно использовать параметр input в сочетании с массивами. Каждый элемент массива описывает отдельное поле ввода с параметрами, включая возможность предзаполнить их.

Swal.fire({
  title: 'Редактирование профиля',
  html:
    '<input id="swal-input1" class="swal2-input" value="Иван">' +
    '<input id="swal-input2" class="swal2-input" value="ivan@example.com">',
  focusConfirm: false,
  preConfirm: () => {
    return [
      document.getElementById('swal-input1').value,
      document.getElementById('swal-input2').value
    ]
  }
});

В данном примере два текстовых поля (input1 и input2) предзаполняются значениями, которые затем могут быть изменены пользователем. Когда форма отправляется, значения из обоих полей собираются и могут быть использованы для дальнейших действий.

Изменение предзаполненного значения в реальном времени

Иногда бывает полезно менять предзаполненное значение динамически в процессе работы с модальным окном. Для этого можно использовать методы JavaScript для обновления значения в поле ввода после того, как окно уже было открыто.

let dynamicValue = 'Измененное значение';

Swal.fire({
  title: 'Ваш адрес',
  input: 'text',
  inputValue: 'Исходный адрес',
  showCancelButton: true,
  confirmButtonText: 'Подтвердить'
}).then((result) => {
  if (result.isConfirmed) {
    // Динамическое обновление значения
    Swal.fire('Новый адрес', dynamicValue);
  }
});

Здесь начальное значение “Исходный адрес” будет отображаться в поле ввода, но по логике программы после обработки действия, например, на основе внешнего события или асинхронной операции, значение будет заменено на новое — dynamicValue.

Использование предзаполненных значений с изображениями

Когда нужно вставить в поле ввода значение, которое включает не только текст, но и изображения, можно использовать HTML разметку внутри модального окна. Пример:

Swal.fire({
  title: 'Ваш профиль',
  html:
    '<input id="swal-input" class="swal2-input" value="https://example.com/profile.jpg">',
  showCancelButton: true,
  confirmButtonText: 'Сохранить'
});

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

Работа с числовыми значениями

Если в модальном окне требуется работать с числовыми данными (например, возраст, количество товаров и т.д.), важно использовать тип input с атрибутом type: 'number'. Для предзаполнения таких полей можно указать значение через inputValue.

Swal.fire({
  title: 'Количество товаров',
  input: 'number',
  inputValue: 5,  // Предзаполненное числовое значение
  showCancelButton: true,
  confirmButtonText: 'Подтвердить'
});

Этот пример позволяет задать начальное количество товаров, которое можно отредактировать в процессе работы с модальным окном.

Предзаполнение с использованием масок ввода

Для специфичных случаев, когда необходимо ограничить ввод пользователем (например, для телефонных номеров, дат и т.д.), можно использовать маски ввода в сочетании с SweetAlert. Для этого потребуется сторонняя библиотека, например, Inputmask.

let mask = new Inputmask("+7 (999) 999-99-99");  // Маска для телефона

Swal.fire({
  title: 'Введите номер телефона',
  input: 'text',
  inputValue: '+7 (123) 456-78-90',  // Предзаполненное значение
  didOpen: () => {
    mask.mask(document.querySelector('#swal-input1'));  // Применение маски
  },
  showCancelButton: true,
  confirmButtonText: 'Подтвердить'
});

В этом примере телефонный номер предзаполняется в соответствующем поле ввода, и применяется маска для правильного форматирования ввода.

Очистка предзаполненных значений

Предзаполнение не всегда является финальной стадией работы с полями ввода. Иногда бывает нужно сбросить предзаполненные значения, например, если пользователь решит отменить действие. Это можно сделать через вызов функции Swal.close() или при изменении состояния кнопки подтверждения.

Swal.fire({
  title: 'Введите новый адрес',
  input: 'text',
  inputValue: 'Старый адрес',
  showCancelButton: true,
  confirmButtonText: 'Подтвердить',
}).then((result) => {
  if (!result.isConfirmed) {
    Swal.close();  // Очистка формы при отмене
  }
});

Таким образом, с помощью SweetAlert можно не только задать предзаполненные значения для различных типов полей ввода, но и обеспечить динамическое обновление этих значений в процессе взаимодействия с пользователем.

Оглавление