我注意到，如果我使用<input type="number" />，前导零不会被删除。我也看到了很多关于如何保持**前导零的讨论。例如，“000023”和“23”是同一个数字，我认为保留这些零没有意义。
<input type="number" />
06odsfpq1#
我将给予一个react用法的例子。它使用state来存储字段的值。但是，我认为你可以用你喜欢的任何变量来替换它。<input type='number' value={Number(this.state.myNumber).toString()}/>在我的例子中，myNumber存储了一个年份。这样，年份2018（例如）就不会被错误地显示为02018。
state
<input type='number' value={Number(this.state.myNumber).toString()}/>
myNumber
2018
02018
wi3ka0sx2#
只需使用如下正则表达式
textboxText= textboxText.replace(/^0+/, '')
iaqfqrcu3#
Html输入标记总是返回文本，而不是数字，甚至它的内容可以强制转换为数字格式，日期等。。所以接下来你应该把输入转换成实际的数字格式：
parseInt(myNum); // If you expect an integer. parseFloat(myNum); // If you expect floating point number.
ds97pgxw4#
添加step=“any”到您的输入标记。如果这在您的浏览器上不起作用，请将type更改为type=“tel”
3qpi33ja5#
你可以试试这个
str1 = str.replace(/^0+/,'');
1l5u6lss6#
试试这个：
<!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>
juzqafwq7#
我在使用React时使用的技巧是公开地将数字转换为字符串。使用value=myNumber.toString()，而不是value=myNumber。只有当输入type=“number”时才需要，而不是当type=“text”时。 如果变量初始化为null，可以通过将falsey值更改为0来防止错误，如：value=(myNumber || 0).toString()`。
value=myNumber.toString()
value=myNumber
时。 如果变量初始化为null，可以通过将falsey值更改为0来防止错误，如：
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()强制转换回Integer，并调用setState()将没有前导零的数字保存回状态对象，告诉react重新呈现，输入字段本身也不会更新以删除任何前导零。但这个问题只在输入类型设置为“number”时出现。如果设置为“text”类型，则不会出现问题，前导零将按预期删除。在这两种情况下，console.log（）显示存储在state中的值确实被去掉了前导零（允许单个0作为值）即使输入字段本身可能显示额外的前导零。我最好的猜测是React内部看到一个整数0 === 000，所以它不需要更新显示？但是在文本字符串中，“0”！= '000'，因此它知道必须更新呈现的字段。无论如何，明显的强制似乎迫使输入字段更新并正确地重新呈现。
onChangeHours
parseInt()
setState()
68bkxrlz8#
我也遇到了同样的问题（在ReactJs应用程序中）以前它是在你输入的时候添加前导零，但是在你输入的时候将下面的代码添加到value属性中会删除零，所以只有输入的数字会显示出来，而不是像这样的“054”。
<input type="number" value={Number(YOUR VALUE HERE FROM STATE).toString()} />
希望它能帮助到某人。
8条答案
按热度按时间06odsfpq1#
我将给予一个react用法的例子。它使用
state来存储字段的值。但是，我认为你可以用你喜欢的任何变量来替换它。<input type='number' value={Number(this.state.myNumber).toString()}/>在我的例子中，
myNumber存储了一个年份。这样，年份2018（例如）就不会被错误地显示为02018。wi3ka0sx2#
只需使用如下正则表达式
iaqfqrcu3#
Html输入标记总是返回文本，而不是数字，甚至它的内容可以强制转换为数字格式，日期等。。
所以接下来你应该把输入转换成实际的数字格式：
ds97pgxw4#
添加step=“any”到您的输入标记。如果这在您的浏览器上不起作用，请将type更改为type=“tel”
3qpi33ja5#
你可以试试这个
1l5u6lss6#
试试这个：
juzqafwq7#
我在使用React时使用的技巧是公开地将数字转换为字符串。
使用
value=myNumber.toString()，而不是value=myNumber。只有当输入type=“number”时才需要，而不是当type=“text”
时。 如果变量初始化为null，可以通过将falsey值更改为0来防止错误，如：value=(myNumber || 0).toString()`。在第一种情况下，即使您在
onChangeHours处理程序中去掉前导零，通过parseInt()强制转换回Integer，并调用setState()将没有前导零的数字保存回状态对象，告诉react重新呈现，输入字段本身也不会更新以删除任何前导零。但这个问题只在输入类型设置为“number”时出现。
如果设置为“text”类型，则不会出现问题，前导零将按预期删除。
在这两种情况下，console.log（）显示存储在state中的值确实被去掉了前导零（允许单个0作为值）
即使输入字段本身可能显示额外的前导零。
我最好的猜测是React内部看到一个整数0 === 000，所以它不需要更新显示？但是在文本字符串中，“0”！= '000'，因此它知道必须更新呈现的字段。
无论如何，明显的强制似乎迫使输入字段更新并正确地重新呈现。
68bkxrlz8#
我也遇到了同样的问题（在ReactJs应用程序中）
以前它是在你输入的时候添加前导零，但是在你输入的时候将下面的代码添加到value属性中会删除零，所以只有输入的数字会显示出来，而不是像这样的“054”。
希望它能帮助到某人。