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

20 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

  6. Juan dice:

    Hola, no encuentro el link para descargar el codigo, solo se descarga un rar con 2 html’s simples

  7. Juan dice:

    No encuentro el link

  8. Juan S. dice:

    Hola, si el numero que coloco no tiene decimales, como aria para que salga xxx,00

    gracias por tu aporte.

  9. Said Robles dice:

    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

  10. manuel dice:

    como haría para que automáticamente primero tome dos decimales y despues la parte entera

  11. Daniel Ruiz dice:

    excelente jeje. me sacó de un apuro. gracias por ela porte

  12. Wilmer P. Silva dice:

    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!

Leave a Reply


Orígenes de Datos SQL Server en WebLogic

Contenido1 Orígenes de Datos1.1 Configurar Jtds1.2 Configurar Driver propio de […]

Instalar Weblogic 12

Contenido1 Descargar2 Instalar2.1 Instalar WebLogic2.2 Configurar dominio3 Validar instalación y […]

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 […]