数字输入框的逗号分隔步骤

Question

我可以指定＆＃39;步骤＆＃39;用户输入数字时的千位增量。但为什么我不能写＃1,000;＆＃39;而不是＆＃39; 1000＆＃39;数千个逗号分隔的增量是多少？怎么做？

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果您想坚持type="number"，则无法完成，因为：

• Chrome报告：

    

  该值必须与以下正则表达式匹配： - ？（\ d + | \ d +。\ d + |。\ d +）（[eE] [ - +]？\ d +）？

• 如规范所述：

    

  value = floating-point number

按照上面的链接查看该规范根本没有提及使用逗号。

如果您想切换到type="text"：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;