在文本框中自动填充逗号和小数 [英] Auto populate Comma and Decimal in Text Box

问题描述

我有一个美元金额的文本框（下面的html）。我试图添加一些CSS或jQuery自动填充逗号和小数时，用户在文本框中输入值。

 < html：text styleId =incomePerPeriodstyleClass对于例如，如果用户输入123456789，它应该自动变为12,345,667.89。 =textboxproperty =employment.incomePerPeriodmaxlength =10/> 
  

我将以下类添加到上面的html代码中，但它不起作用。任何人都可以请帮助我如何实现这一目标？

  class =form-control text-right number
  

解决方案

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

事情是，我找不到将输入的数字字符串分组到 ?? n nnn ... nnn nnn nn 与正则表达式匹配。然而，像 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）将正则表达式应用于反转字符串$ c>会像123456789一样工作以产生 ['98'，'765'，'432'，'1'] 。

然后加入。和，在适当的位置与

  .reduce（（p，c，i）=> i  -  1 + c+ c）+ c）
  

并获得 98.765,432,1 。那么我们只需要再次反转这个字符串。所以这里是一个工作示例。

$ b

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）//反转纯数字字符串.match（rex）//获取数组中的组。 （（p，c，i）=> i - 1？p +，+ c：p +。+ c）。 //相应地插入（。）和（，）res + = /\.|,/.test(res）？ ：.0; //测试res中是否有（。）或（，）this.value = Array.prototype.reduce.call（res，（p，c）=> c + p）; //反转字符串并显示}}}}}}}}} < input id =numinplaceholder =enter number>

snippet-code-html lang-html prettyprint- $ b $ res + = /\.|,/.test(res）？

：.0; 当我们只有美分时，部分负责为0。加前缀。

I have a text box of dollar amount ( html below ). I am trying to add some css or jquery to auto populate comma and decimal when user enters value in the text box. For eg , if the user enters 123456789 , it should automatically become 12,345,667.89 .

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

I added the below class to the html code above but it's not working. Can anyone please help me on how to achieve this ?

class="form-control text-right number"

解决方案

It might be or might not be simpler by pure JS string functions but here is a regexp version.

The thing is, i couldn't find a way to group the entered number string into ??n nnn ... nnn nnn nn matches with regexp. However it relatively simple to get groups like nn nnn nnn ... nnn n??. This is the regex;

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

So i reverse the string to start with as follows;

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

then applying the regex to my reversed string with .match(rex) would work like, "123456789" to yield [ '98', '765', '432', '1' ].

Then of course join them with . and , at proper positions with

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

and get 98.765,432,1. Well we just need to reverse this string again of course. So here is a working example.

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

The res += /\.|,/.test(res) ? "" : ".0"; part takes care of prefixing a "0." when we only have the cents.

这篇关于在文本框中自动填充逗号和小数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！