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.:
|
1 2 3 4 5 6 7 8 9 10 |
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.
|
1 |
onkeypress="mascara(this,cpf)" |
La instrucción «onpaste» con retorno falso sirve para que al cuadro de texto no se pueda pegar texto directamente.
|
1 |
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.
|
1 |
varMonto = varMonto.replace(/[\,]/g,''); |
Se parsea a tipo «Float» con el metodo «toFixed(2)» para que muestre el numero con dos decimales.
|
1 |
varMonto = parseFloat(varMonto).toFixed(2) |
Se llama a la funcion «addCommas», la cual agrega las comas cada tres posiciones.
|
1 |
varMonto = addCommas(varMonto); |
La función «addCommas» se muestra a continuación .
|
1 2 3 4 5 6 7 8 9 10 11 |
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
Excelente… pero la pregunta es … ¿El codigo en Java utilizando Java Swing sería?
Estoy tratando de usar onchange en ves de onkeypress
pero no me da… alguna opcion?
Gracias
¿Por qué razón tendrías que ejecutarlo con onchange? Esta con el método onkeypress para que por cada presión de una tecla realice las validaciones.
Bueno lo que pasa es que tengo 3 campos..
importe, iva y subtotal.
Y tengo una función que cuando capturo el importe en automatico me calcula y me pone el iva y el subtotal.
y lo que quiero esque tambien esos campos tengan la mascara de moneda.
Me pareció interesante tu planteamiento. Por esta razón decidí agregar una solución como un apartado de este post. La descarga incluye la nueva solución.
Donde puedo ver el ejemplo funcionando? o podrías compartir un archivo con el contenido, gracias.
Perdón ya vi el link de descarga.
Excelente, concreto a lo que es!!!
hola, oye una preguntota, como le puedo hacer para que me reconosca mas de 2 decimales?
Que onda. El siguiente código funciona con decimales ilimitados
Hola, no encuentro el link para descargar el codigo, solo se descarga un rar con 2 html’s simples
Buenas
El código esta embebido en los html
No encuentro el link
El codigo esta embedido dentro de los html
Hola, si el numero que coloco no tiene decimales, como aria para que salga xxx,00
gracias por tu aporte.
Muchas gracias por tu aporte, le agradezco mucho y veo que ya tiene bastantes años desde que se dió la solución, me ha funcionado muchísimo
como haría para que automáticamente primero tome dos decimales y despues la parte entera
excelente jeje. me sacó de un apuro. gracias por ela porte
Buenas noches. He encontrado su función muy útil para mi trabajo. Desafortunadamente soy nuevo en esto de la programación y debo hacer que algunas veces funcione con tres decimales y en otras ocasiones con dos. Le quedaría en verdad muy agradecido si por favor me ayuda con esto!
¿Cómo decide en que momento usar 2 o 3 decimales?