在数字输入中强制前导零答案

【问题标题】：Force leading zero in number input在数字输入中强制前导零
【发布时间】：2014-01-08 04:49:27
【问题描述】：

我正在编写一个警报网络应用程序。我有两个数字输入，一个用于小时，一个用于分钟。因此，当我使用键盘箭头时，它们会从 0 变为 23/59。是否有一种 HTML 原生方式可以让它们从 00（01,02 等）变为 23/59？

我只担心 UI 方面，因为无论如何我的 JS 都会管理丢失的 0。

编辑 - 根据要求：

我有什么：

我想要什么：

当数字小于 10（00,01,02 到 59）时，我希望自动使用前导 0，而不是从 0,1,2 到 59。

【问题讨论】：

从你的问题中不清楚你在问什么。也许您可以整理一个 JSFiddle 或分享一个链接，以便我们可以看到您正在使用什么？
请说明您的具体问题或添加其他详细信息以准确突出您的需要。正如目前所写的那样，很难准确地说出你在问什么。
你不想用 JavaScript 来操作输入，只需要“原生”HTML？
没有原生的方法，你需要测试数字是否小于10，如果为真则在数字前添加字符串'0'。

标签： html number-formatting

【解决方案1】：

我用它来根据需要添加零：

<script>
  function leadingZeros(input) {
    if(!isNaN(input.value) && input.value.length === 1) {
      input.value = '0' + input.value;
    }
  }
</script>

我只是在输入的各种事件上称其为最适合我的方式，例如：

<input type="number"
       value="00"
       onchange="leadingZeros(this)"
       onkeyup="leadingZeros(this)"
       onclick="leadingZeros(this)" />

这不是一个理想的解决方案，主要是因为随着用户更改数字并在前面加上零，视觉上会发生轻微变化，但它对我有用 :)

编辑：忘了提，我很欣赏没有javascript的本地解决方案的答案，但我想为通过谷歌搜索登陆这里的人们提供一些东西。

【讨论】：

感谢您的回答！感谢发布！

【解决方案2】：

恐怕没有原生 HTML 方法可以做到这一点，除非使用 Select 标记。如果您使用的是文本输入，则必须通过 javascript 在前 10 个值上添加前导 0。

【讨论】：

【解决方案3】：

解决 OP 问题的正确现代解决方案是使用 type=time 的输入，这样他们就不必担心前导零或任何其他东西。

【讨论】：