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
Categories: JavaScript, Programacion

10 Responses so far.

  1. diegodesdecolombia dice:

    Excelente… pero la pregunta es … ¿El codigo en Java utilizando Java Swing sería?

  2. Isaac Vqz dice:

    Estoy tratando de usar onchange en ves de onkeypress
    pero no me da… alguna opcion?
    Gracias

    • arieloliva dice:

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

      • Isaac Vqz dice:

        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.

        • arieloliva dice:

          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.

  3. Manuel dice:

    Donde puedo ver el ejemplo funcionando? o podrías compartir un archivo con el contenido, gracias.

  4. Juan F Hernandez dice:

    Excelente, concreto a lo que es!!!

  5. Mario dice:

    hola, oye una preguntota, como le puedo hacer para que me reconosca mas de 2 decimales?

    • arieloliva dice:

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

Leave a Reply


API REST 5. Hypermedia

Contenido1 Introducción2 Programar hypermedia2.1 Crear Entity2.1.1 PersonaHateoas2.1.2 GrupoHateoas2.1.3 PaisHateoas2.2 Crear […]

API REST 4. Calidad al implementar aplicacion Web

Contenido1 Introducción1.1 Nivel 1. Uso correcto de URIs1.2 Nivel 2. […]

API REST 3. Publicar y consumir

Contenido1 Descripción2 Publicar y Consumir2.1 Usando CRUD2.1.1 Crear Persona2.1.2 Consultar […]

API REST 2. Conectarse a Base de Datos MySQL

Contenido1 Descripción2 Crear la Base de Datos3 Agregar dependencias4 Crear […]

API REST 1. Spring

Contenido1 Descripción2 Pasos2.1 Instalar eclipse2.2 Instalar librerías de Spring2.3 Importar […]