Skip to content

HTML input format number thousands separator | Example code

  • by

To get HTML format number thousands separator in the input field you have to use JavaScript code. Where replace method and regular expression is required.

HTML format number thousands separator example

Simple example code entering 12000 and it looks like 12,000 in the textbox.

<!doctype html>
  <head>

    <script>
    // insert commas as thousands separators 
    function addCommas(n){
      var rx=  /(\d+)(\d{3})/;
      return String(n).replace(/^\d+/, function(w){
        while(rx.test(w)){
          w= w.replace(rx, '$1,$2');
        }
        return w;
      });
    }

    // return integers and decimal numbers from input
    // optionally truncates decimals- does not 'round' input

    function validDigits(n, dec){
      n= n.replace(/[^\d\.]+/g, '');
      var ax1= n.indexOf('.'), ax2= -1;
      if(ax1!= -1){
        ++ax1;
        ax2= n.indexOf('.', ax1);
        if(ax2> ax1) n= n.substring(0, ax2);
        if(typeof dec=== 'number') n= n.substring(0, ax1+dec);
      }
      return n;
    }
    
    window.onload= function(){
      var n1= document.getElementById('number1'),
      n2= document.getElementById('number2');
      n1.value=n2.value='';

      n1.onkeyup= n1.onchange=n2.onkeyup=n2.onchange= function(e){
        e=e|| window.event; 
        var who=e.target || e.srcElement,temp;
        if(who.id==='number2')  temp= validDigits(who.value,2); 
        else temp= validDigits(who.value);
        who.value= addCommas(temp);
      }   
      n1.onblur= n2.onblur= function(){
        var temp=parseFloat(validDigits(n1.value)),
        temp2=parseFloat(validDigits(n2.value));
        if(temp)n1.value=addCommas(temp);
        if(temp2)n2.value=addCommas(temp2.toFixed(2));
      }
    }
  </script>
</head>
<body>
  <h1>Input Thousands Commas</h1>
  <div>
    <p>
      <label> Any number <input id="number1" value=""></label>
      <label>2 decimal places <input id="number2" value=""></label>
    </p></div>
  </body>
  </html>

Output:

HTML format number thousands separator input

Another way is to use Intl.NumberFormat() method.

    <script>

      givenNumber = 123456789;

      nfObject = new Intl.NumberFormat('en-US');
      output = nfObject.format(givenNumber);

      console.log(output)

    </script>

Output: 123,456,789

Do comment if you have any doubts or suggestions on this HTML code.

Note: The All HTML Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading