Question

我有text_field_tag，允许用户输入金额。如何在用户输入时动态格式化此值？例如，如果用户输入“5000”，则必须显示为“5,000”。

Answer 1

如果您以直截了当的方式思考，我们只需使用 格式化 值替换当前的val。在这种情况下，性能并不昂贵，即使多次使用for循环（在格式化和格式化之间）。

为了替换文本，我不使用正则表达式，因为我们需要找到/匹配右侧 的文本 ，所以要使用正则表达式，我认为我们需要反转首先是文本，应用正则表达式替换并反转结果。这比简单的循环和替换更糟糕。

以下是代码：

<强> HTML ：

<input type="text"/>
<button> Show value </button>

<强> JS ：

var format = function(text) {
  var f = "";
  for(var i = text.length - 1; i >=0; i--){
    f = text[i] + f;
    var k = text.length - i;
    if(k % 3 == 0 && i > 0){
      f = "," + f;
    }
  }
  return f;
}
//defomratting the text to get the actual value
var deformat = function(text) {
  return text.replace(/,/g, "");
}

$("input").on("input", function(e){
  var s = this.selectionStart;
  var rawVal = $(this).val();
  var clen = rawVal.length;
  val = deformat(rawVal);
  var f = format(val);
  s += f.length - clen;
  $(this).val(f);
  //set the selection to ensure that it's not changed during typing.
  this.selectionStart = this.selectionEnd = s;
});

$("button").click(function(){
  alert(deformat($("input").val()));
});

Demo

Answer 2

你可以使用Jquery Mask Plugin非常容易集成，它会带来很多你可以使用的面具。还会有大量的时间。即。

$('.money').mask('000.000.000.000.000,00', {reverse: true});

https://igorescobar.github.io/jQuery-Mask-Plugin/

用户正在动态键入格式文本字段

2 个答案: