El Post describe el código en JavaScript para crear una mascara de tipo moneda mientras se escribe en un cuadro de texto. El separador de millares es ‘,’ y acepta solo dos números decimales.
Mascara de Moneda
La función principal es «cpf«, la cual se explica a continuación.:
function cpf(v){
v=v.replace(/([^0-9\.]+)/g,'');
v=v.replace(/^[\.]/,'');
v=v.replace(/[\.][\.]/g,'');
v=v.replace(/\.(\d)(\d)(\d)/g,'.$1$2');
v=v.replace(/\.(\d{1,2})\./g,'.$1');
v = v.toString().split('').reverse().join('').replace(/(\d{3})/g,'$1,');
v = v.split('').reverse().join('').replace(/^[\,]/,'');
return v;
}
Linea 2. Acepta solo números y el punto.
Linea 3. Quita punto al inicio.
Linea 4. Elimina dos puntos juntos.
Linea 5. Si encuentra el patrón .123 lo cambia por .12.
Linea 6. Si encuentra el patrón .1. o .12. lo cambia por .1 o .12.
Linea 7. Pone la cadena al revés Si encuentra el patrón 123 lo cambia por 123,.
Linea 8. Si inicia con una coma la reemplaza por nada.
La llamada a la función se realiza en el evento «onkeypress» del cuadro de texto.
onkeypress="mascara(this,cpf)"
La instrucción «onpaste» con retorno falso sirve para que al cuadro de texto no se pueda pegar texto directamente.
onpaste="return false"
Mascara de moneda en un numero
Cuando ya se tiene un numero y se quiera aplicar la mascara de moneda, se puede realizar lo siguiente. Se eliminan las comas.
varMonto = varMonto.replace(/[\,]/g,'');
Se parsea a tipo «Float» con el metodo «toFixed(2)» para que muestre el numero con dos decimales.
varMonto = parseFloat(varMonto).toFixed(2)
Se llama a la funcion «addCommas», la cual agrega las comas cada tres posiciones.
varMonto = addCommas(varMonto);
La función «addCommas» se muestra a continuación .
function addCommas(nStr){
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
La siguiente imagen muestra tres campos de texto. El campo «importe» crea una mascara de tipo moneda mientras se escribe. Los campos «IVA» y «SubTotal» se calculan a partir del dato del campo «importe», cuando el cursor del mouse sale.
Mascara de Moneda en numero