Числовые поля

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

Создание числового поля

Для создания числового поля в SweetAlert используется параметр input, который позволяет указать тип вводимого значения. В случае числового ввода, тип поля указывается как "number". Этот тип поля автоматически ограничивает ввод только числовыми значениями, предотвращая ошибочные данные от пользователя.

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

Swal.fire({
  title: 'Введите количество',
  input: 'number',
  inputLabel: 'Число товара',
  inputPlaceholder: 'Введите количество',
  showCancelButton: true,
  confirmButtonText: 'Подтвердить'
});

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

Валидация числового ввода

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

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

Swal.fire({
  title: 'Введите возраст',
  input: 'number',
  inputLabel: 'Возраст',
  inputAttributes: {
    min: 18,
    max: 100,
    step: 1
  },
  inputPlaceholder: 'Введите ваш возраст',
  showCancelButton: true,
  confirmButtonText: 'Подтвердить'
});

Здесь поле ввода ограничено диапазоном от 18 до 100 лет, и шаг ввода равен 1.

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

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

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

Swal.fire({
  title: 'Введите сумму',
  input: 'number',
  inputLabel: 'Сумма платежа',
  inputPlaceholder: 'Введите сумму',
  showCancelButton: true,
  confirmButtonText: 'Подтвердить'
}).then((result) => {
  if (result.isConfirmed) {
    const amount = result.value;
    console.log('Введённая сумма:', amount);
  }
});

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

Форматирование числового поля

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

Пример форматирования с использованием Jav * aScript:

Swal.fire({
  title: 'Введите сумму',
  input: 'number',
  inputLabel: 'Сумма',
  inputPlaceholder: 'Введите сумму',
  inputAttributes: {
    step: '0.01',
    min: '0'
  },
  showCancelButton: true,
  confirmButtonText: 'Подтвердить'
}).then((result) => {
  if (result.isConfirmed) {
    const formattedAmount = result.value.toFixed(2); // Форматирование с двумя знаками после запятой
    console.log('Введённая сумма (форматированная):', formattedAmount);
  }
});

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

Модификация интерфейса числового поля

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

Пример изменения интерфейса:

Swal.fire({
  title: 'Выберите количество',
  input: 'number',
  inputLabel: 'Количество',
  inputAttributes: {
    min: 1,
    max: 100,
    step: 1,
    style: 'text-align: center; font-size: 18px;'
  },
  showCancelButton: true,
  confirmButtonText: 'Подтвердить'
});

В этом примере изменены стиль числового поля с выравниванием по центру и увеличением шрифта до 18px.

Обработка ошибок ввода

Важным аспектом работы с числовыми полями является обработка ошибок ввода, если пользователь вводит недопустимое значение. Хотя SweetAlert ограничивает ввод только числовыми данными, можно добавить дополнительные проверки, чтобы убедиться в правильности введённого числа.

Пример с проверкой диапазона:

Swal.fire({
  title: 'Введите возраст',
  input: 'number',
  inputLabel: 'Возраст',
  inputPlaceholder: 'Введите ваш возраст',
  showCancelButton: true,
  confirmButtonText: 'Подтвердить'
}).then((result) => {
  if (result.isConfirmed) {
    const age = result.value;
    if (age < 18 || age > 100) {
      Swal.fire('Ошибка', 'Возраст должен быть между 18 и 100', 'error');
    } else {
      console.log('Введённый возраст:', age);
    }
  }
});

Здесь после подтверждения ввода проводится проверка: если возраст выходит за пределы допустимого диапазона, появляется сообщение об ошибке.

Использование числовых полей в формах

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

Пример формы с несколькими полями:

Swal.fire({
  title: 'Введите информацию',
  html: `
    <input id="name" class="swal2-input" placeholder="Имя">
    <input id="age" class="swal2-input" type="number" placeholder="Возраст">
  `,
  showCancelButton: true,
  confirmButtonText: 'Подтвердить'
}).then((result) => {
  if (result.isConfirmed) {
    const name = document.getElementById('name').value;
    const age = document.getElementById('age').value;
    console.log('Имя:', name, 'Возраст:', age);
  }
});

В этом примере создается форма с полем для ввода имени и числовым полем для возраста.

Заключение

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