CODEWITHSUNDEEP
javascriptjqueryhtml
user4752928
user4752928

Reputation:

Comma separated step for number input box

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>

Upvotes: 1

Views: 7943

Answers (1)

Przemek
Przemek

Reputation: 3975

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>

Upvotes: 5

Related Questions