Home / Questions / 23179
Accepted
Oscar E. Alvarado
Asked: 2020-09-10 08:30:21 +0800 CST 2020-09-10 08:30:21 +0800 CST

如何让我的输入文本在 jquery 中有千位和小数点分隔符？

  • 772

我正在尝试为我的输入做一个货币格式，我想用千位分隔符（“，”）和小数自动格式化；我尝试了几个插件，但它们对我不起作用。

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

这给我添加了逗号，但仅适用于千位的第一个单位:(

这个例子在这里有效，但是在模糊事件上，我如何在 keyup 事件上运行它。

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

  this.value = parseFloat(this.value.replace(/,/g, ""))
                    .toFixed(2)
                    .toString()
                    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
});
javascript

5 Answers

  1. Best Answer

    例如，如果您有：

    <input id="number">

    所以使用 JQuery 1：

    $("#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, ",");
        });
    }
});

    * 参见JSFiddle。

    成绩

    1. 改编自https://stackoverflow.com/a/18657757/870248
    • 21

  2. 今天，大多数现代浏览器都支持Intl.NumberFormat，它可以帮助我们格式化数字，而无需使用正则表达式或 jQuery 特定的函数。

    要将逗号显示为千位分隔符，请按如下方式使用

    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>

    • 9

  3. 对于这种情况，我使用jquery.maskedinput.min.js一个插件来格式化输入的输入

    一个简单的例子是

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

    除了数字之外，它还允许您格式化更多输入数据。

    • 2

  4. 在 mask 函数中使用 jQuery jquery.maskedinput.min.js，你给它你希望输入的格式

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

  5. 在这里我给你留下一个函数javascript，它允许你根据给定的掩码格式化一个数字，此外该函数允许你处理公式。

    // 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>

    • 0