Всем привет! Не получается сделать нужный 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)} м`;
});