HTML Input type number Thousand separator

Solution 1:

Using autoNumeric plugin you can made a field as numeric input with different separators.

Include plugin:

<script src="~/Scripts/autoNumeric/autoNumeric.min.js" type="text/javascript"></script>

Html:

 <input type="text" id="DEMO" data-a-sign="" data-a-dec="," data-a-sep="." class="form-control"> 

Script:

<script>
 jQuery(function($) {
$('#DEMO').autoNumeric('init');   
 });
</script>

You can type only number, if you input 100000,99 you will see 100.000,99.

More: https://github.com/autoNumeric/autoNumeric

Solution 2:

• Check this webdesign.tutsplus.com tutorial

• Final result is summarized here (look at direct Codepen playground)

  $("#formInput".on("keyup", function(event ) {                   
      // When user select text in the document, also abort.
      var selection = window.getSelection().toString(); 
      if (selection !== '') {
          return; 
      }       
      // When the arrow keys are pressed, abort.
      if ($.inArray(event.keyCode, [38, 40, 37, 39]) !== -1) {
          return; 
      }       
      var $this = $(this);            
      // Get the value.
      var input = $this.val();            
      input = input.replace(/[\D\s\._\-]+/g, ""); 
      input = input?parseInt(input, 10):0; 
      $this.val(function () {
          return (input === 0)?"":input.toLocaleString("en-US"); 
      }); 
  }); 
  

Notes:

• toLocaleString() javascript function Actually show thousands separator (example and doc)

• run below code in your console to get the idea

  (30000000).toLocaleString('en-US',{useGrouping:true})