第二个例子

Question

我有一个美元金额的文本框（下面的html）。当用户在文本框中输入值时，我试图添加一些css或jquery来自动填充逗号和小数。例如，如果用户输入123456789，则应自动变为12,345,667.89。

<html:text styleId="incomePerPeriod" styleClass="textbox" property="employment.incomePerPeriod" maxlength="10" />

我在上面的html代码中添加了以下类，但它无效。任何人都可以帮助我如何实现这一目标？

class="form-control text-right number"

Answer 1

纯JS字符串函数可能会或可能不会更简单，但这里是正则表达式版本。

问题是，我找不到将输入的数字字符串分组为??n nnn ... nnn nnn nn与regexp匹配的方法。然而，获得像nn nnn nnn ... nnn n??这样的群组相对简单。这是正则表达式;

/(^\d{2})|(\d{1,3})(?=\d{1,3}|$)/g

所以我将字符串反转为以下开头;

Array.prototype.reduce.call(str,(p,c) => c + p)

然后使用.match(rex)将正则表达式应用于我的反向字符串就像"123456789"一样产生[ '98', '765', '432', '1' ]。

然后当然与.和,在

的适当位置加入他们

.reduce((p,c,i) => i - 1 ? p + "," + c : p + "." + c)

并获取98.765,432,1。那么我们当然需要再次反转这个字符串。所以这是一个有效的例子。

function formatNumber(e){
  var rex = /(^\d{2})|(\d{1,3})(?=\d{1,3}|$)/g,
      val = this.value.replace(/^0+|\.|,/g,""),
      res;
      
  if (val.length) {
    res = Array.prototype.reduce.call(val, (p,c) => c + p)            // reverse the pure numbers string
               .match(rex)                                            // get groups in array
               .reduce((p,c,i) => i - 1 ? p + "," + c : p + "." + c); // insert (.) and (,) accordingly
    res += /\.|,/.test(res) ? "" : ".0";                              // test if res has (.) or (,) in it
    this.value = Array.prototype.reduce.call(res, (p,c) => c + p);    // reverse the string and display
  }
}

var ni = document.getElementById("numin");

ni.addEventListener("keyup", formatNumber);

<input id="numin" placeholder="enter number">

当我们只有美分时，res += /\.|,/.test(res) ? "" : ".0";部分会为"0."添加前缀。

Answer 2

<input id="num" type="text" />

function addCommas(x) {
  var parts = x.toString().split(".");
  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  return parts.join(".");
}

$('#num').keypress(function() {
  var numberTyped = $("#num").val();
  var convertedNum = addCommas(numberTyped);
  $("#num").val(convertedNum);

});

该脚本使用正则表达式添加逗号。传递像23456789.12345这样的数字会产生23,456,789.12345，这是期望的结果。

第二个例子

http://jsfiddle.net/ezbao2a3/15/

Answer 3

这是一个格式化数字onkeyup的解决方案，以获取input的实际值。

keypress事件检查有效密钥（例如仅检查数字和退格）。这可能已经完善并移动到js事件监听器。

还可以调整格式化程序正则表达式以处理小数。

这是一个片段。希望它有所帮助。

isNumberKey = function(evt) {
  var charCode = (evt.which) ? evt.which : evt.keyCode;
  if (charCode != 46 && charCode > 31 
      && (charCode < 48 || charCode > 57))
    return false;

  return true;
}

var textInput = document.getElementById('txtChar');

textInput.addEventListener('keyup', function(evt){
    var n = parseInt(this.value.replace(/\D/g,''),10);
    textInput.value = n.toLocaleString();
}, false);

<input id="txtChar" onkeypress="return isNumberKey(event)" type="text" name="txtChar" />

Answer 4

我尝试了这个解决方案并且有效。在脚本标记中导入以下行。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"></script>

然后在onLoad函数上，使用以下行：

$('#incomePerPeriod').mask("#,##0.00", {reverse: true});

自动填充文本框中的逗号和小数

4 个答案:

第二个例子