Текстовые области

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

Использование текстовых областей

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

Для создания текстовой области используется параметр input: 'textarea':

Swal.fire({
  title: 'Введите ваш комментарий',
  input: 'textarea',
  inputPlaceholder: 'Напишите здесь...',
  showCancelButton: true,
  confirmButtonText: 'Отправить'
});

В этом примере создается окно с текстовой областью, в которое пользователь может ввести свои комментарии. Параметр inputPlaceholder устанавливает текст-подсказку внутри текстовой области, который исчезает, как только начинается ввод. Опция showCancelButton позволяет отобразить кнопку для отмены действия.

Стилизация текстовой области

SweetAlert также позволяет кастомизировать внешний вид текстовой области с помощью параметров, таких как inputAttributes и inputStyle. Первый параметр позволяет задать HTML-атрибуты для элемента, а второй — применять inline-стили.

Пример использования inputAttributes:

Swal.fire({
  title: 'Введите ваш текст',
  input: 'textarea',
  inputAttributes: {
    maxlength: 200,
    rows: 10,
    cols: 50
  },
  inputPlaceholder: 'Максимум 200 символов...',
  showCancelButton: true,
  confirmButtonText: 'Отправить'
});

В данном примере задаются дополнительные атрибуты для текстовой области. Параметры maxlength, rows и cols контролируют максимальную длину вводимого текста, а также размеры области (в строках и столбцах).

С помощью inputStyle можно задать дополнительные стили, например, цвет фона или рамки:

Swal.fire({
  title: 'Введите ваш текст',
  input: 'textarea',
  inputStyle: 'background-color: #f0f0f0; border: 1px solid #ccc;',
  inputPlaceholder: 'Ваш текст здесь...',
  showCancelButton: true,
  confirmButtonText: 'Отправить'
});

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

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

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

Пример:

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

В этом примере, после того как пользователь нажмет кнопку “Отправить”, введенный текст будет выведен в консоль. Свойство result.value содержит строку, которую пользователь ввел в текстовую область.

Ограничения и валидация ввода

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

Пример с валидацией:

Swal.fire({
  title: 'Введите ваш комментарий',
  input: 'textarea',
  inputPlaceholder: 'Ваш комментарий...',
  showCancelButton: true,
  confirmButtonText: 'Отправить'
}).then((result) => {
  if (result.isConfirmed) {
    const comment = result.value;
    if (comment.length < 10) {
      Swal.fire('Ошибка', 'Комментарий должен быть не менее 10 символов', 'error');
    } else {
      console.log('Комментарий:', comment);
    }
  }
});

В этом примере, если комментарий пользователя содержит меньше 10 символов, будет выведено сообщение об ошибке, и текст не будет отправлен.

Множественные текстовые области

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

Swal.fire({
  title: 'Оставьте свой отзыв',
  html:
    '<input id="name" class="swal2-input" placeholder="Ваше имя">' +
    '<textarea id="comment" class="swal2-input" placeholder="Ваш комментарий"></textarea>',
  focusConfirm: false,
  preConfirm: () => {
    return {
      name: document.getElementById('name').value,
      comment: document.getElementById('comment').value
    };
  }
}).then((result) => {
  if (result.isConfirmed) {
    console.log('Имя:', result.value.name);
    console.log('Комментарий:', result.value.comment);
  }
});

Здесь используется HTML для создания пользовательских полей ввода и текстовой области. После отправки формы введенные данные (имя и комментарий) обрабатываются в промисе.

Завершение работы с текстовыми областями

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

Оглавление