Как сделать форматирование суммы в input?

Question

[Айнур Ярулин]

Как сделать, чтобы число вводимое в input (например 1000) автоматически
показывалось вот-так: 1 000,00 ₽?

P.S нужно на чистом JavaScript

Comments

[0xD34F]

нужно на чистом JavaScript

А какие самостоятельные действия вы предприняли для решения своей проблемы? Ну, типа - подумать головой, погуглить. Нет? Не царское это дело?

[Айнур Ярулин]

0xD34F, я вообще делал так для обычного числа:

document.querySelectorAll('.amount').forEach(amount => {
	amount.textContent = new Intl.NumberFormat('ru-RU', {
		currency: 'rub',
		style: 'currency'
	}).format(amount.textContent)
})

И подумал, что для инпута нужно вместо textContent написать value, но не работает

[0xD34F]

squadbrodyaga, и это всё? Несерьёзно. Как насчёт воспользоваться ответами на собственные же вопросы? Например, задавали такой вопрос - тоже про обработку пользовательского ввода. То есть, вроде бы вы должны быть в курсе про событие input - однако, в вашем "делал так"-"подумал" о нём речи не идёт. Как так?

[Айнур Ярулин]

0xD34F, о нифига себе, это еще и мой вопрос. Лан попробую что нибудь сделать

Answer 1

[Михаил Р.]

Установить iMask

import IMask from "imask";

const input = document.getElementById("id123");
const mask = new IMask(input, { mask: "0 000,00" });

input.addEventListener("input", () => console.log(mask.unmaskedValue));

1. Шаблон маски, как заказывали.
2. Возврат чистого значения, без маски.

Comments

[Айнур Ярулин]

Mike Ro , спасибо, это выглядит по лучше чем то, что получилось у меня)

[Михаил Р.]

squadbrodyaga, ура, я пригодился! =)

[Айнур Ярулин]

Mike Ro, только тут проблемка, получается нельзя писать число с 5-ю символами до нуля
например 10 000.00

[Михаил Р.]

squadbrodyaga, можно заюзать регулярку.