Задать вопрос
@VJC2016

Как ввести нужный placeholder для плагина iMask.js?

Всем привет! Не получается сделать нужный placeholder для плагина iMask.js. Сейчас выводит " м", а нужно "0 м". Input обычный текстовой, туда должна быть записана длина в метрах, с дробной частью.
const calc_1 = document.getElementById('calc_1');
const calc_2 = document.getElementById('calc_2');

const maskOptions = {
  mask: 'num м', // Маска с числовой частью и статической частью
  lazy: false,
  placeholder: '0 м', // Плейсхолдер
  blocks: {
    num: {
      mask: Number, // Используем числовую маску
      scale: 2, // Два знака после запятой
      thousandsSeparator: '', // Без разделителя тысяч
      radix: '.', // Разделитель дробной части (точка)
      mapToRadix: [','], // Заменять запятую на точку
      normalizeZeros: true, // Убирать лишние нули
      min: 0, // Минимальное значение
      max: Infinity, // Максимальное значение
      placeholder: '0', // Плейсхолдер для числовой части
    },
  },
};

const mask1 = IMask(calc_1, maskOptions);
const mask2 = IMask(calc_2, maskOptions);

// Устанавливаем плейсхолдеры
calc_1.placeholder = '0 м';
calc_2.placeholder = '0 м';

// Функция для удаления лишних нулей
function removeLeadingAndTrailingZeros(number) {
  let str = number.toString();
  let parts = str.split('.');
  let integerPart = parts[0];
  let fractionalPart = parts.length > 1 ? parts[1] : '';

  // Удаляем лишние нули в целой части
  integerPart = integerPart.replace(/^0+/, '').replace(/^-+/, '');

  // Если целая часть пустая, возвращаем "0"
  if (integerPart === '' || integerPart === '0 м' || integerPart === ' м') {
    integerPart = '0';
  }

  return `${integerPart}.${fractionalPart}`;
}

// Обработка события 'accept'
mask1.on('accept', () => {
  const valueWithoutSuffix = mask1.unmaskedValue; // Получаем значение без маски
  mask1.value = `${removeLeadingAndTrailingZeros(valueWithoutSuffix)} м`;
});

mask2.on('accept', () => {
  const valueWithoutSuffix = mask2.unmaskedValue; // Получаем значение без маски
  mask2.value = `${removeLeadingAndTrailingZeros(valueWithoutSuffix)} м`;
});
  • Вопрос задан
  • 35 просмотров
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 1
pickHabr
@pickHabr
Костыльных дел мастер
// Устанавливаем плейсхолдеры
calc_1.placeholder = '0 м';
calc_2.placeholder = '0 м';


поменять на

// Устанавливаем плейсхолдеры
mask1.value = `${removeLeadingAndTrailingZeros(mask1.unmaskedValue)} м`;
mask2.value = `${removeLeadingAndTrailingZeros(mask2.unmaskedValue)} м`;
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы