从输入 type=number 中删除前导零
[英]Remove leading zeros from input type=number
问题描述
我注意到如果我使用<input type="number" />前导零不会被删除。 我还看到很多关于如何保持前导零的讨论。
例如“000023”和“23”是相同的数字，我认为保留这些零没有意义。
7 个解决方案
解决方案1
10 已采纳 2015-06-03 16:54:23
只需使用这样的正则表达式
textboxText= textboxText.replace(/^0+/, '')
解决方案2
7 2018-07-21 15:30:51
我将以反应用法为例。 它使用存储字段值的state 。 但是，我认为你可以用你喜欢的任何变量替换它。
<input type='number' value={Number(this.state.myNumber).toString()}/>
就我而言， myNumber存储一年的数字。 这样， 2018 （例如）将不会错误地显示为02018 。
解决方案3
3 2015-06-03 16:52:29
Html输入标签总是返回文本，而不是数字，甚至其内容也可以强制转换为数字格式，日期等...
接下来你应该将该输入转换为实际的数字格式：
parseInt(myNum); // If you expect an integer.
parseFloat(myNum); // If you expect floating point number.
解决方案4
2 2017-01-05 15:40:02
为此，HTML5具有<input type="tel">
解决方案5
1 2015-06-03 17:00:28
你可以试试这个。
str1 = str.replace(/^0+/,'');
解决方案6
0 2015-06-03 17:06:08
试试这个 ：
<!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>
解决方案7
0 2019-02-13 07:16:04
将step =“any”添加到输入标记中。 如果这不适用于您的浏览器，请将类型更改为type =“tel”
解决方案8
0 2021-11-01 06:05:30
我在使用 React 时使用的技巧是公开地将数字转换为字符串。
使用value=myNumber.toString() ，而不是value=myNumber 。
这仅在输入 type="number" 时才需要，如果 type="text"` 时不需要。
如果您的变量被初始化为 null，您可以通过将 falsey 值更改为 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处理程序中onChangeHours前导零，也可以通过parseInt()强制转换回整数，并调用setState()将没有前导零的数字保存回状态对象，告诉 react 重新-render，输入字段本身不会更新以删除任何前导零。
但是这个问题只有在输入类型设置为“数字”时才会出现。
如果设置为“文本”类型，则没有问题，前导零会按预期删除。
在这两种情况下，console.log() 显示存储在 state 中的值确实去除了前导零（允许单个 0 作为值。）
即使输入字段本身可能会显示额外的前导零。
我最好的猜测是 React 在内部看到一个整数 0 === 000，所以它不会费心更新显示？？？ 但是在文本字符串中，'0' != '000'，所以它知道它必须更新呈现的字段。
无论如何，明显的强制似乎迫使输入字段正确更新和重新渲染。
如何从函数参数中的数字中删除前导零
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.