17

Estoy intentando hacer un formato de moneda para mi input, lo cual quiero que se formatee automáticamente con separador de miles(",") y decimales; intente con varios plugins pero no me dan resultado.

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;
    }

Esto me agrega comas, pero solo para la primera unidad de miles :(

Este ejemplo de acá funciona, pero en un evento blur, como hago para ejecutarlo en un evento keyup.

$("#number").keyup(function() {

  this.value = parseFloat(this.value.replace(/,/g, ""))
                    .toFixed(2)
                    .toString()
                    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
});
8
  • 1
    Muéstranos por favor lo que has intentado: plugins y ejemplo de código.
    – Shaz
    Commented el 9 sept. 2016 a las 16:36
  • Revisa esta respuesta en inglés Commented el 9 sept. 2016 a las 16:37
  • Esto me suena a otra pregunta parecida de SOes: es.stackoverflow.com/q/20400/250
    – Alvaro Montoro
    Commented el 9 sept. 2016 a las 16:53
  • si de ahí la saque, ya que queria explicar que es mas o menos lo que quiero hacer Commented el 9 sept. 2016 a las 17:03
  • Mauricio, el enlace que me pasaste sirve, pero como hago para realizarlo en un evento keyup. Commented el 9 sept. 2016 a las 17:16

5 respuestas 5

22

Si tuvieses, por ejemplo:

<input id="number">

Entonces, con JQuery1:

$("#number").on({
    "focus": function (event) {
        $(event.target).select();
    },
    "keyup": function (event) {
        $(event.target).val(function (index, value ) {
            return value.replace(/\D/g, "")
                        .replace(/([0-9])([0-9]{2})$/, '$1.$2')
                        .replace(/\B(?=(\d{3})+(?!\d)\.?)/g, ",");
        });
    }
});

* Véase en JSFiddle.


Notas

  1. Adaptado de https://stackoverflow.com/a/18657757/870248
5
  • Hola Paul, gracias por el ejemplo, pero mi intención es hacerlo en el evento keyup, ya que necesito que cuando se vaya digitando el monto se vaya formateando automáticamente, y claro que el decimal no afecte el formato de miles. Commented el 9 sept. 2016 a las 19:01
  • Hola, @OscarE.Alvarado He actualizado el código para formatear la entrada en el evento keyup. Commented el 9 sept. 2016 a las 19:21
  • Excelente, gracias Paul. Commented el 9 sept. 2016 a las 20:02
  • como lo hago para que lo formatee sin decimales y solo separador de miles? Commented el 8 may. 2018 a las 15:44
  • 2
    como lo hago para que lo formatee sin decimales y solo separador de miles? => la solución era comentar donde le reemplaza los dos decimales Commented el 8 may. 2018 a las 15:50
11

Hoy día, la mayoría de los navegadores modernos soportan Intl.NumberFormat lo cual nos ayuda a dar formato a un número sin necesidad de recurrir a expresiones regulares ni a funciones específicas de jQuery.

Para mostrar coma como separador de miles, usarlo de la siguiente forma

var numero = 1E6 + 56 / 100; //Un millón y 56 centésimas
document
  .getElementById('salida')
  .innerHTML = new Intl.NumberFormat('es-MX').format(numero);
<div id="salida"></div>

var numero = 1E6 + 56 / 100; //Un millón y 56 centésimas
$('#salida').html(new Intl.NumberFormat('es-MX').format(numero));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="salida"></div>

3

Utiliza jQuery jquery.maskedinput.min.js en la función mask, tu le das el formato que desees que tenga tu input

$('#txtMonto').mask('000,000,000.00', { reverse: true });
2

Yo utilizo para ese caso jquery.maskedinput.min.js un plugin que te formatea la entrada del input

Un ejemplo sencillo es

jQuery(function($){
   $("#date").mask("99/99/9999",{placeholder:"mm/dd/yyyy"});
   $("#phone").mask("(999) 999-9999");
   $("#tin").mask("99-9999999");
   $("#ssn").mask("999-99-9999");
});

Ademas de números, te permite formatear mas datos de entrada.

4
  • 2
    En el ejemplo veo fechas y teléfonos, ¿cómo sería para el caso particular que se pregunta?
    – Alvaro Montoro
    Commented el 9 sept. 2016 a las 18:11
  • @AlvaroMontoro tienes como quieres los numeros formateados?
    – cignius
    Commented el 9 sept. 2016 a las 18:17
  • Parece que OP quiere los números con , para separador de miles, millones, etc y . como separador de decimales.
    – Alvaro Montoro
    Commented el 9 sept. 2016 a las 18:31
  • 1
    Exacto, esto no seria de utilidad, ya que son mascaras. Commented el 9 sept. 2016 a las 18:47
0

aquí te dejo una función en javascript que permite formatear un numero según una mascara dada, ademas la función permite procesar formular.

// formatea un numero según una mascara dada ej: "-$###,###,##0.00"
//
// elm   = elemento html <input> donde colocar el resultado
// n     = numero a formatear
// mask  = mascara ej: "-$###,###,##0.00"
// force = formatea el numero aun si n es igual a 0
//
// La función devuelve el numero formateado

function MASK(form, n, mask, format) {
  if (format == "undefined") format = false;
  if (format || NUM(n)) {
    dec = 0, point = 0;
    x = mask.indexOf(".")+1;
    if (x) { dec = mask.length - x; }

    if (dec) {
      n = NUM(n, dec)+"";
      x = n.indexOf(".")+1;
      if (x) { point = n.length - x; } else { n += "."; }
    } else {
      n = NUM(n, 0)+"";
    } 
    for (var x = point; x < dec ; x++) {
      n += "0";
    }
    x = n.length, y = mask.length, XMASK = "";
    while ( x || y ) {
      if ( x ) {
        while ( y && "#0.".indexOf(mask.charAt(y-1)) == -1 ) {
          if ( n.charAt(x-1) != "-")
            XMASK = mask.charAt(y-1) + XMASK;
          y--;
        }
        XMASK = n.charAt(x-1) + XMASK, x--;
      } else if ( y && "$0".indexOf(mask.charAt(y-1))+1 ) {
        XMASK = mask.charAt(y-1) + XMASK;
      }
      if ( y ) { y-- }
    }
  } else {
     XMASK="";
  }
  if (form) { 
    form.value = XMASK;
    if (NUM(n)<0) {
      form.style.color="#FF0000";
    } else {
      form.style.color="#000000";
    }
  }
  return XMASK;
}

// Convierte una cadena alfanumérica a numérica (incluyendo formulas aritméticas)
//
// s   = cadena a ser convertida a numérica
// dec = numero de decimales a redondear
//
// La función devuelve el numero redondeado

function NUM(s, dec) {
  for (var s = s+"", num = "", x = 0 ; x < s.length ; x++) {
    c = s.charAt(x);
    if (".-+/*".indexOf(c)+1 || c != " " && !isNaN(c)) { num+=c; }
  }
  if (isNaN(num)) { num = eval(num); }
  if (num == "")  { num=0; } else { num = parseFloat(num); }
  if (dec != undefined) {
    r=.5; if (num<0) r=-r;
    e=Math.pow(10, (dec>0) ? dec : 0 );
    return parseInt(num*e+r) / e;
  } else {
    return num;
  }
}
ingresar un valor numero (o formula) formatear con -$##,###,##0.00<br>
<input onchange="MASK(this,this.value,'-$##,###,##0.00',1)"><br>
<br>
ingresar un valor numero (o formula) formatear con 00/00/0000<br>
<input onchange="MASK(this,this.value,'00/00/0000',1)"><br>

2
  • exelente esta contribucion, pero hay 1 detalle cuando el usuario preciona "," como separador decimal el input lo toma como 1 entero ! Commented el 13 mar. 2018 a las 15:04
  • 1
    Estimado @PiratadelProfit, aunque no hay una norma que establezca el punto "." o coma "," como separador decimal o de miles (y viceversa) nos encontramos que la distribución del teclado en español utiliza como separador decimal el punto en su bloque numérico, es por ello que la rutina la diseñe (y también por razones históricas) a que utilice el punto "." como separador decimal, sin embargo la rutina es susceptible a modificaciones por lo que podrán adaptarla para que utilice la coma como separador decimal.
    – fwBasic
    Commented el 14 mar. 2018 a las 18:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.