I have an issue with number inputting. The user usually enters a large number with many zeros, and often they are missing one or two zero as it is difficult to accurately count them.

I think javascript can work this out by showing the user the number they have inducted, formatted with mas.

eg:

input: | 1230000000000 |

Result: 1,230,000,000,000

How could this be acplished?

I have an issue with number inputting. The user usually enters a large number with many zeros, and often they are missing one or two zero as it is difficult to accurately count them.

I think javascript can work this out by showing the user the number they have inducted, formatted with mas.

eg:

input: | 1230000000000 |

Result: 1,230,000,000,000

How could this be acplished?

• javascript
• input
• numbers

• 1 Java, or Javascript? Do you have a code example? – Ben Commented Apr 29, 2011 at 4:20
• Are you making an application or is this an html form? Java and Javascript, despite the names, are very different in their style and mon uses. – Mario Commented Apr 29, 2011 at 4:30

4 Answers 4

Use the following function in javascript

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

example

addCommas('9999999.00')
// 9,999,999.00

This is an old question but still without a correct answer so, this is my dynamic solution, it takes the same addCommas function to reformat the output but add a keyup event to clean the current value ( remove ',' ) and reformat again the new value.

$('.datainto').keyup(function () {
    var value = $(this).val().replace(/,/g,'');
    $(this).val(addCommas(value));
});

Check the working solution here: http://jsfiddle/darorck/371zrjet/

function formatNumber() {
  // select the input box
  let numInput = document.getElementById("myNumberInput");

  //get the value from the selected input box, remove mas
  //and convert it into float
  let num = parseFloat(numInput.value.replace(/,/g, ""));

  //replace the value in the input box with ma separated value
  //only if it is a valid number
  if (!isNaN(num)) {
    let formattedNum = num.toLocaleString('en-US');
    numInput.value = formattedNum;
  } else {
    numInput.value = "";
  }
}

<input type="text" id="myNumberInput" onkeyup="formatNumber()" />

In modern browsers, you can simply achieve this with toLocaleString()

console.log((1230000000000).toLocaleString());
console.log((12300000000).toLocaleString());
console.log((1230000.152).toLocaleString());

I know I'm very late for giving the answer, But still, I post this answer because this question is ing in the search result of How to add a dynamic ma in number in javascript, So I thought I need to add an answer which is shorter and better for uping developers.