Como mencioné en mi respuesta a otra pregunta similar,
Hoy día, la mayoría de los navegadores modernos soportan Intl.NumberFormat lo cual nos ayuda a dar formato a un número sin necesidad de recurrir a expresiones regulares ni a funciones específicas de jQuery.
En la liga anterior, al final de la página se incluye la compatibilidad con navegadores de escritorio, móviles y servidor.
A continuación el ejemplo que incluí en la respuesta referida, adaptado para mostrar el formato de pesos argentinos, es decir, signo $, punto como separador de miles y coma como separador de decimales.
var numero = 1E6 + 56 / 100; //Un millón y 56 centésimas
document
.getElementById('salida')
.innerHTML = new Intl.NumberFormat('es-AR', {
style: 'currency',
currency: 'ARS'
}).format(numero);
<div id="salida"></div>
En el siguiente ejemplo intenté aplicar lo anterior para permitir que un input agregue automáticamente el separador de miles y permita la inclusión de decimales pero está incompleto ya que le falta considerar varios casos como el que usuario cambie el punto de inserción de texto o que quiera escribir un centavo (0,01).
var monto = document.querySelector('input');
var options = {
style:'currency',
currency:'ARS',
minimumFractionDigits:0
};
monto.addEventListener('input',function(){
// Si el último caracter es una coma, deberemos agregarla
var separador = (this.value.substr(this.value.length - 1,1)===',')?',':'';
var monto1 = this.value
.replace(/[^\d,]/g,"") //remover $ punto y otros caracteres no validos
.replace(",","."); // JavaScript usa punto como separador decimal para los números,entonces reemplazamos la coma por un punto
this.value = Intl.NumberFormat('es-AR',options).format(monto1)
+ separador; // Si el último caracter es una coma, agregarlo.
});
<input type="text" placeholder="$ 10.000">
Muy probablemente la solución sea adoptar una librería para enmascarar entrada que incluya el formato de moneda deseado o bien que permita personalizarlo.
Preguntas relacionadas