Comma separated step for number input box

Question

I can specify the 'step' for thousand increments when a user inputs a number. But why I cannot write '1,000' instead of '1000' for the increment to happen with the comma separation for thousands? How to do this?

 <div class="input"><label for="salary">Salary</label> <input class='inp_cont' id="salary" name="salary" placeholder="Enter your salary" step="1000" min="0" required="" type="number"></div> 

Answer 1

It cannot be done if you want to stick to the type="number" , because:

• As Chrome reports:

  The value must match to the following regular expression: -?(\\d+|\\d+.\\d+|.\\d+)([eE][-+]?\\d+)?

• As specification mentions:

  value = floating-point number

Follow the above link to see that spec doesn't mention use of comma at all.

---

If you want to switch to type="text" :

 document.getElementById('salary').addEventListener('input', event => event.target.value = (parseInt(event.target.value.replace(/[^\\d]+/gi, '')) || 0).toLocaleString('en-US') ); 

 <div class="input"> <label for="salary">Salary</label> <input class='inp_cont' id="salary" pattern="^[\\d,]+$" name="salary" placeholder="Enter your salary" required="" type="text"> </div>