Подтверждение с вводом текста

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

Основной синтаксис

Для создания окна с подтверждением, в котором будет текстовое поле для ввода, используется метод Swal.fire(). Он принимает объект настроек, в котором можно указать параметры для текста, заголовка и самого поля ввода.

Swal.fire({
  title: 'Введите ваше имя',
  input: 'text', 
  inputPlaceholder: 'Ваше имя',
  showCancelButton: true,
  confirmButtonText: 'Отправить',
  cancelButtonText: 'Отмена',
}).then((result) => {
  if (result.isConfirmed) {
    console.log('Введенное имя: ', result.value);
  }
});

В этом примере:

  • title — заголовок окна, который будет отображаться в верхней части.
  • input — определяет тип поля ввода. В данном случае используется текстовое поле ('text').
  • inputPlaceholder — текст, который будет отображаться в поле ввода, пока пользователь не начнет вводить свой текст.
  • showCancelButton — показывает кнопку отмены, если значение установлено в true.
  • confirmButtonText и cancelButtonText — задают текст кнопок подтверждения и отмены, соответственно.

Метод then() выполняет обратный вызов с объектом result, который содержит данные о том, как пользователь взаимодействовал с окном. Важно, что результат ввода доступен в result.value только если действие было подтверждено.

Обработка результата

При успешном подтверждении (когда пользователь нажимает кнопку подтверждения) можно получить введённое значение через свойство value объекта result. В случае, если пользователь отменяет действие или закрывает окно без подтверждения, результат будет содержать значение null.

Пример с выводом введённого текста:

Swal.fire({
  title: 'Введите ваш email',
  input: 'email', 
  inputPlaceholder: 'Email',
  showCancelButton: true,
  confirmButtonText: 'Отправить',
  cancelButtonText: 'Отмена',
}).then((result) => {
  if (result.isConfirmed && result.value) {
    console.log('Введённый email: ', result.value);
  } else if (result.isDismissed) {
    console.log('Окно было закрыто');
  }
});

Здесь проверяется не только факт подтверждения, но и наличие значения в поле ввода.

Валидация ввода

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

Для реализации валидации можно использовать опцию inputValidator, которая позволяет задать функцию, проверяющую введённые данные.

Пример:

Swal.fire({
  title: 'Введите ваш возраст',
  input: 'number', 
  inputPlaceholder: 'Возраст',
  inputValidator: (value) => {
    if (!value) {
      return 'Возраст не может быть пустым!';
    }
    if (isNaN(value) || value < 1 || value > 120) {
      return 'Пожалуйста, введите корректный возраст.';
    }
  },
  showCancelButton: true,
  confirmButtonText: 'Подтвердить',
  cancelButtonText: 'Отмена',
}).then((result) => {
  if (result.isConfirmed) {
    console.log('Возраст: ', result.value);
  }
});

В этом примере:

  • Функция inputValidator проверяет, что введённое значение является числом и находится в допустимом диапазоне (от 1 до 120 лет).
  • Если значение не соответствует этим условиям, появляется сообщение об ошибке.

Настройки и стилизация

Для создания более привлекательных окон и улучшения пользовательского опыта можно использовать дополнительные настройки, такие как кастомизация цветов, размеров и шрифтов. Для этого можно использовать такие параметры, как background, color, padding, width и другие.

Пример с кастомизацией стилей:

Swal.fire({
  title: 'Пожалуйста, введите ваш адрес',
  input: 'text', 
  inputPlaceholder: 'Адрес',
  background: '#f0f8ff',
  color: '#333333',
  padding: '20px',
  inputAttributes: {
    maxlength: 100
  },
  confirmButtonText: 'Отправить',
  cancelButtonText: 'Отмена',
}).then((result) => {
  if (result.isConfirmed) {
    console.log('Адрес: ', result.value);
  }
});

В этом примере изменены:

  • background — цвет фона окна.
  • color — цвет текста в окне.
  • padding — отступы внутри окна.
  • inputAttributes — дополнительные атрибуты для поля ввода, например, максимальная длина текста.

Использование различных типов ввода

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

  • email — для ввода email-адреса.
  • password — для ввода пароля.
  • number — для ввода чисел.
  • textarea — для многострочного ввода текста.

Пример с многострочным вводом:

Swal.fire({
  title: 'Введите описание',
  input: 'textarea',
  inputPlaceholder: 'Ваш текст...',
  showCancelButton: true,
  confirmButtonText: 'Отправить',
  cancelButtonText: 'Отмена',
}).then((result) => {
  if (result.isConfirmed) {
    console.log('Текст: ', result.value);
  }
});

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

Заключение

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

Оглавление