我注意到，如果我使用<input type="number" />，则不会删除前导零。我还看到很多关于如何保持前导零的讨论。
例如“000023”和“23”是同一个数字，我认为保留这些零是没有意义的。
【问题讨论】：
标签： javascript html validation input numbers
我将举一个 react 用法的例子。它使用state 存储字段的值。但是，我认为你可以用你喜欢的任何变量替换它。
<input type='number' value={Number(this.state.myNumber).toString()}/>
在我的例子中，myNumber 存储年份编号。这样，年份2018（例如）就不会被错误地显示为02018。
【讨论】：
this.state.myNumber.toString()
24.036 小数点后前导零的数字。
只需使用这样的正则表达式
textboxText= textboxText.replace(/^0+/, '')
【讨论】：
+'00022'.toString()
Html 输入标签总是返回文本，而不是数字，甚至它的内容可以被强制转换为数字格式、日期等...
所以接下来你应该将该输入转换为实际的数字格式：
parseInt(myNum); // If you expect an integer.
parseFloat(myNum); // If you expect floating point number.
【讨论】：
+'00022'.toString() 都可以工作
radix 的情况下使用parseInt 可能是不安全的
parseInt。与parseInt 不同，使用+ 或Number 时不需要radix，因为内部数字转换不会解析八进制数字。parseInt:Although discouraged by ECMAScript 3 and forbidden by ECMAScript 5, many implementations interpret a numeric string beginning with a leading 0 as octal. The following may have an octal result, or it may have a decimal result. Always specify a radix to avoid this unreliable behavior.
HTML5 有 <input type="tel"> 用于此目的
【讨论】：
你可以试试这个。
str1 = str.replace(/^0+/,'');
【讨论】：
试试这个：
<!DOCTYPE html>
<html>
<body>
<input type="number" id="txtfield" /><button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var myNumber = document.getElementById("txtfield").value;
document.write(parseInt(myNumber ,10));
}
</script>
</body>
</html>
【讨论】：
将 step="any" 添加到您的输入标签。 如果这在您的浏览器上不起作用，请将类型更改为 type="tel"
【讨论】：
type="tel" 是要走的路！
我在使用 React 时使用的技巧是将数字公然转换为字符串。
使用value=myNumber.toString()，而不是value=myNumber。
这仅在输入 type="number" 时才需要，而不是在 type="text"` 时才需要。
如果您的变量初始化为 null，您可以通过将 false 值更改为 0 来防止错误，如：value=(myNumber || 0).toString()。
class inputHours extends React.Component {
this.state = { hours: 0};
render() {
return (
<label>Hours: could show Leading 0's</label>
<input type="number" min="0" max="24"
value={this.state.hours}
onChange={this.onChangeHours}
/>
<label>Hours: strips leading zeros</label>
<input type="number" min="0" max="24"
value={this.state.hours.toString()}
onChange={this.onChangeHours}
/>
);
}
在第一种情况下，即使您在 onChangeHours 处理程序中去除前导零，通过 parseInt() 强制转换回整数，并调用 setState() 将没有前导零的数字保存回状态对象，告诉响应重新渲染，输入字段本身不会更新以删除任何前导零。
但是这个问题只有在输入类型设置为“数字”时才会出现。
如果设置为“文本”类型，则没有问题，前导零会按预期删除。
在这两种情况下，console.log() 显示存储在 state 中的值确实去掉了前导零（允许单个 0 作为值。）
即使输入字段本身可能会显示额外的前导零。
我最好的猜测是 React 内部看到一个整数 0 === 000，所以它不会费心更新显示？？？
但是在文本字符串中，'0' != '000'，所以它知道它必须更新呈现的字段。
无论如何，明显的强制似乎强制输入字段正确更新和重新渲染。
【讨论】：