Маски для валют

Валютные маски в библиотеке Inputmask используются для форматирования денежных значений во время ввода. Они обеспечивают:

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

Валютные маски особенно востребованы в:

  • интернет-магазинах;
  • CRM-системах;
  • бухгалтерских интерфейсах;
  • банковских приложениях;
  • формах расчётов;
  • административных панелях.

Подключение библиотеки

Через CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/inputmask/5.0.8/inputmask.min.js"></script>

Подключение через npm:

npm install inputmask

Использование:

import Inputmask from "inputmask";

Базовая валютная маска

Простейший пример:

<input id="price">
Inputmask("currency").mask("#price");

После ввода:

1234567

поле автоматически преобразуется в:

1,234,567.00

Использование alias currency

Валютные маски чаще всего строятся через alias currency.

Пример:

Inputmask({
    alias: "currency"
}).mask("#price");

Alias уже содержит:

  • разделители тысяч;
  • дробную часть;
  • обработку чисел;
  • поддержку отрицательных значений;
  • форматирование при вводе.

Основные параметры валютных масок

radixPoint

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

Inputmask({
    alias: "currency",
    radixPoint: ","
}).mask("#price");

Результат:

12 345,67

groupSeparator

Разделитель тысяч.

Inputmask({
    alias: "currency",
    groupSeparator: " "
}).mask("#price");

Результат:

1 000 000

Популярные варианты:

Символ Использование
, США
. Некоторые страны Европы
Россия, Казахстан
' Швейцария

digits

Количество цифр после запятой.

Inputmask({
    alias: "currency",
    digits: 2
}).mask("#price");

Результат:

123.45

digitsOptional

Управляет обязательностью дробной части.

Inputmask({
    alias: "currency",
    digits: 2,
    digitsOptional: false
}).mask("#price");

Теперь значение всегда будет содержать:

100.00

а не:

100

prefix

Добавляет символ валюты перед числом.

Inputmask({
    alias: "currency",
    prefix: "$ "
}).mask("#price");

Результат:

$ 1,250.00

suffix

Добавляет текст после числа.

Inputmask({
    alias: "currency",
    suffix: " ₸"
}).mask("#price");

Результат:

15 000 ₸

Форматирование рублей

Inputmask({
    alias: "currency",
    groupSeparator: " ",
    radixPoint: ",",
    digits: 2,
    suffix: " ₽",
    autoGroup: true
}).mask("#price");

Пример результата:

1 250 000,50 ₽

Форматирование тенге

Inputmask({
    alias: "currency",
    groupSeparator: " ",
    radixPoint: ".",
    digits: 0,
    suffix: " ₸"
}).mask("#price");

Результат:

250 000 ₸

Форматирование долларов

Inputmask({
    alias: "currency",
    prefix: "$ ",
    groupSeparator: ",",
    radixPoint: ".",
    digits: 2
}).mask("#price");

Результат:

$ 12,500.99

Форматирование евро

Inputmask({
    alias: "currency",
    prefix: "€ ",
    groupSeparator: ".",
    radixPoint: ",",
    digits: 2
}).mask("#price");

Результат:

€ 10.500,75

Автоматическая группировка

Параметр autoGroup включает автоматическое разделение разрядов.

Inputmask({
    alias: "currency",
    autoGroup: true
}).mask("#price");

Без группировки:

1000000

С группировкой:

1,000,000

Ограничение минимального значения

Inputmask({
    alias: "currency",
    min: 0
}).mask("#price");

Теперь отрицательные числа запрещены.

Ограничение максимального значения

Inputmask({
    alias: "currency",
    max: 100000
}).mask("#price");

Попытка ввода числа больше ограничения будет отклонена.

Работа с отрицательными значениями

Inputmask({
    alias: "currency",
    allowMinus: true
}).mask("#price");

Пример:

-15 000

Запрет отрицательных значений:

Inputmask({
    alias: "currency",
    allowMinus: false
}).mask("#price");

Удаление маски из значения

Поле отображает форматированное значение, но серверу обычно требуется число без разделителей и валютных символов.

Получение «чистого» значения:

const value = document.getElementById("price").inputmask.unmaskedvalue();

console.log(value);

Результат:

1250000

Получение float-значения

const raw = document.getElementById("price").inputmask.unmaskedvalue();

const number = parseFloat(raw);

Использование removeMaskOnSubmit

Автоматическое удаление форматирования перед отправкой формы:

Inputmask({
    alias: "currency",
    removeMaskOnSubmit: true
}).mask("#price");

В form-data попадёт:

12500.75

а не:

12,500.75 ₽

Использование rightAlign

По умолчанию валютные значения выравниваются вправо.

Inputmask({
    alias: "currency",
    rightAlign: true
}).mask("#price");

Отключение:

Inputmask({
    alias: "currency",
    rightAlign: false
}).mask("#price");

nullable и пустые значения

Inputmask({
    alias: "currency",
    nullable: true
}).mask("#price");

Если поле пустое, значение будет:

null

placeholder в валютных масках

Inputmask({
    alias: "currency",
    placeholder: "0"
}).mask("#price");

Пример отображения:

0,00

Использование inputmode

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

Inputmask({
    alias: "currency",
    inputmode: "decimal"
}).mask("#price");

Работа с большими числами

Inputmask({
    alias: "currency",
    groupSeparator: " ",
    digits: 2,
    autoGroup: true
}).mask("#price");

Результат:

125 000 000 000.50

Динамическое изменение валюты

Переключение между валютами

const input = document.getElementById("price");

function setCurrency(currency) {

    if (currency === "usd") {

        Inputmask({
            alias: "currency",
            prefix: "$ ",
            groupSeparator: ",",
            radixPoint: ".",
            digits: 2
        }).mask(input);

    }

    if (currency === "eur") {

        Inputmask({
            alias: "currency",
            prefix: "€ ",
            groupSeparator: ".",
            radixPoint: ",",
            digits: 2
        }).mask(input);

    }
}

Использование data-атрибутов

<input
    id="price"
    data-inputmask="'alias': 'currency', 'suffix': ' ₽'">
Inputmask().mask(document.querySelectorAll("input"));

Маска для целых денежных значений

Если копейки не используются:

Inputmask({
    alias: "currency",
    digits: 0
}).mask("#price");

Результат:

15 000

Работа с процентами и денежными значениями

Иногда требуется комбинированный формат.

Inputmask({
    alias: "numeric",
    suffix: " %",
    digits: 2
}).mask("#percent");

Использование numericInput

Параметр изменяет направление ввода.

Inputmask({
    alias: "currency",
    numericInput: true
}).mask("#price");

Поведение становится похожим на банковские терминалы:

1
0.01

10
0.10

100
1.00

Автоматическая очистка незавершённых значений

Inputmask({
    alias: "currency",
    clearIncomplete: true
}).mask("#price");

Если число введено некорректно, поле очищается.

Валидация завершённости

Проверка корректности:

const isComplete = document
    .getElementById("price")
    .inputmask
    .isComplete();

console.log(isComplete);

Обработка событий

oncomplete

Срабатывает после корректного ввода.

Inputmask({
    alias: "currency",

    oncomplete() {
        console.log("Ввод завершён");
    }

}).mask("#price");

onincomplete

Inputmask({
    alias: "currency",

    onincomplete() {
        console.log("Некорректное значение");
    }

}).mask("#price");

oncleared

Inputmask({
    alias: "currency",

    oncleared() {
        console.log("Поле очищено");
    }

}).mask("#price");

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

<input class="money">
<input class="money">
<input class="money">
Inputmask({
    alias: "currency",
    groupSeparator: " ",
    suffix: " ₽"
}).mask(".money");

Интеграция с React

import Inputmask from "inputmask";
import { useEffect, useRef } from "react";

export default function App() {

    const ref = useRef(null);

    useEffect(() => {

        Inputmask({
            alias: "currency",
            suffix: " ₽",
            groupSeparator: " "
        }).mask(ref.current);

    }, []);

    return <input ref={ref} />;
}

Интеграция с Vue

mounted() {

    Inputmask({
        alias: "currency",
        suffix: " ₽"
    }).mask(this.$refs.price);

}

Интеграция с Angular

ngAfterViewInit(): void {

    Inputmask({
        alias: "currency",
        suffix: " ₽"
    }).mask(this.price.nativeElement);

}

Типичные ошибки

Неверный radixPoint

Неправильная настройка:

radixPoint: "."

при вводе:

10,50

может привести к ошибкам обработки.

Конфликт локалей

Например:

groupSeparator: ",",
radixPoint: ","

Одинаковые символы для разных задач вызывают некорректное поведение.

Отправка форматированного значения на сервер

Ошибка:

15 000 ₽

вместо:

15000

Решение:

removeMaskOnSubmit: true

или:

unmaskedvalue()

Практический пример формы оплаты

<form id="payment-form">

    <input id="amount">

</form>
Inputmask({
    alias: "currency",
    groupSeparator: " ",
    radixPoint: ",",
    digits: 2,
    suffix: " ₽",
    autoGroup: true,
    removeMaskOnSubmit: true
}).mask("#amount");

Пользователь видит:

25 000,50 ₽

На сервер отправляется:

25000.50
Оглавление