logo标签列表

从 input type=number 中移除前导零

javascripthtmlvalidationinputnumbers
49
我注意到如果使用 <input type="number" /> ，前导零将不会被删去。我也看到很多关于保留前导零的讨论。
例如，"000023" 和 "23" 是相同的数字，我认为保留这些零是没有意义的。
你实际上想要做什么？ - Xotic750
因为我的输入包含一个数值，所以最好不要显示前导零。 - Alessio Dal Bianco
你面临的问题是什么？如何删除前导零或者是否合理保留显示中的前导零？ - Xotic750
7个回答
60
我将用 React 的使用示例来进行说明。它使用state存储字段的值。但是，您可以用任何您喜欢的变量来替换它。
在我的情况下，myNumber 存储一个年份。这种方法可以避免像02018这样的年份（例如2018年）被错误显示。 <input type='number' value={Number(this.state.myNumber).toString()}/>
2
运行得非常好。此外，如果您正在执行将其转换为数字的任何处理，则不需要使用Number()部分。例如，在我的代码中，我正在四舍五入数字，因此只需要this.state.myNumber.toString()。 - Michael Aaron Wilson
4
这将不允许您输入像 24.036 这样的数字，即小数点后有前导零的数字。 - HVenom
2
这很美妙，直到我不得不输入5..7..然后将光标移动到中间，再输入0，才能得到0.507，但还是谢谢！ - Rico Rodriquez Collins
@RicoRodriquezCollins 你只需要把光标移到前面，然后按下“。”，它会自动添加“0.”。 - undefined
18

只需使用如下的正则表达式即可

textboxText= textboxText.replace(/^0+/, '')
1
真的吗，一个正则表达式？为什么不用像 +'00022'.toString() 这样的东西呢？ - Xotic750
10
它会阻止小数分隔符。 - Erlan
5

HTML输入标签总是返回文本，而不是数字，即使其内容可以被强制转换为数字格式、日期等。

因此，接下来您应该将该输入转换为实际的数字格式：

parseInt(myNum); // If you expect an integer.
parseFloat(myNum); // If you expect floating point number.
1
似乎要从数字字符串中去掉前导零需要付出很多努力。同样，在这两种情况下，+'00022'.toString()都可以工作。 - Xotic750
此外，如果在使用parseInt时没有提供radix参数，可能会存在安全隐患。 - Xotic750
你其实是在做同样的事情。"+00002"只是强制类型转换（也就是，在这种情况下调用parseInt()），此外，再次将其转换为字符串需要更多的努力，我想，在最好的情况下，这并不是预期的。 - bitifet
2
强制转换不调用 parseInt。与 parseInt 不同，使用 + 或 Number 时不需要 radix，因为内部数字转换不会解析八进制数。parseInt: 虽然 ECMAScript 3 不鼓励使用，ECMAScript 5 禁止使用以 0 开头的数字字符串作为八进制数。以下内容可能具有八进制结果或十进制结果。始终指定基数以避免此不可靠行为。 - Xotic750
1

在您的输入标记中添加step="any"。 如果在您的浏览器上无法正常工作，请将类型更改为type="tel"

type="tel" 仍然允许前导零，尽管这可能是过滤仅为整数的有用技巧。 - Kalnode
1
我正在寻找一个关于如何显示前导零的答案，或者说，在移动设备上输入漂亮的数字时保留它们的方法，似乎 type="tel" 是正确的选择！ - Nebulosar
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>
0

在使用React时，我使用的技巧是将数字明确地转换为字符串。
使用value=myNumber.toString()而不是value=myNumber。
只有当输入类型为"number"时才需要这样做，如果类型为"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处理程序中剥离前导零，通过parseInt()强制将其转换回整数，并调用setState()将不带前导零的数字保存回状态对象，告诉React重新渲染，输入字段本身也不会更新以删除任何前导零。
但是，只有在将输入类型设置为“number”时才会出现此问题。
如果将其设置为“text”类型，则没有问题，前导零将按预期删除。
在两种情况下，console.log()显示存储在状态中的值确实剥离了前导零（允许单个0作为值）。
即使输入字段本身可能显示额外的前导零，也是如此。
我最好的猜测是，在内部React看到一个整数0 === 000，因此它不会费心更新显示？？？ 但是在文本字符串中，“0”！=“000”，因此它知道必须更新呈现的字段。
无论如何，明显的强制似乎可以强制输入字段正确更新和重新渲染。
更新： @bitiset提供了一个更完整的答案，考虑了实数（浮点数，小数点）。
如果您的数字值将是带有小数点的浮点数，而不是整数，请考虑使用parseFloat()，否则小数点后面的零可能会被删除，从而导致错误。
但是，如果在“保存”之前明确将存储的值转换为字符串，而不是依赖于读取时的隐式强制转换，也许可以避免这个问题？
-1
你可以试试这个。
    str1 = str.replace(/^0+/,'');
1
这与@Bhanu Chowdary给出的答案有何不同？ - Xotic750
其实，那时我没有看到他的回答。@Xotic750 - RJ Anoop
为了使StackOverflow按设计工作，答案不应重复。相反，应该投票支持现有的好答案。这与传统论坛不同。您可以在每个页面顶部链接的帮助部分中阅读更多信息。请注意，重复的答案可能会被平台删除。如果您的解决方案与现有答案不同，请删除或编辑以指示差异。或者，如果您有关于此解决方案的其他有用信息未在其他答案中涵盖，请进行编辑。鼓励投票支持。我们期待您独特的贡献，并强调值得投票支持的优秀答案。 - SherylHohman
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接