HTML Input type number Thousand separator

Question

I want to have a thousand separator (e.g. 1,000,000) in my Input field. However, it has to be of type number because I need to be able to adjust its value using "step". Code:

<input type="number" id='myNumber' value="40,000" step='100'> 

I tried using Javascript to adjust the value but didn't work. Any help would be appreciated. Thanks!

Answer 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

Answer 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})