Mascara de moneda mientras se escribe

    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
Mascara de Moneda

    La función principal es «cpf«, la cual se explica a continuación.:

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.

    La instrucción «onpaste» con retorno falso sirve para que al cuadro de texto no se pueda pegar texto directamente.

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.

    Se parsea a tipo «Float» con el metodo «toFixed(2)» para que muestre el numero con dos decimales.

    Se llama a la funcion «addCommas», la cual agrega las comas cada tres posiciones.

    La función «addCommas» se muestra a continuación .

    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.

mascaraEnNumero
Mascara de Moneda en numero
    En el siguiente enlace se muestra todo el código, solo se tiene que descomprimir y ejecutar el archivo este-mascaraMoneda.html en un Explorardor web. este-mascaraMoneda.rar

18 comentarios

    1. ¿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.

      1. 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.

        1. 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.

    1. Que onda. El siguiente código funciona con decimales ilimitados

  1. 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

Deja un comentario