如何在文本框中输入的所有 0-9 数字之前显示一个零？

Question

这是示例

  <div>
    <input class="timepic" type="number"><label style="font-size: 12px;color: black;">HH</label>
    <input class="timepic" type="text"><label style="font-size: 12px;color: black;">MM</label>
    <input class="timepic" type="text"><label style="font-size: 12px;color: black;">SS</label>
  </div>

• 所以我想在文本框中添加 00,01,02,03.......。 我期待与 angular 组件相关的答案。

- 重要......

如果我在文本框中键入一个数字，数字必须是 00,01,02... 像这样在文本框中没有 focusOut，以及如果我在文本框中使用向上和向下箭头，数字必须是 00,01.02... ......

Answer 1

如果您使用的是 model，则可以使用事件(change) 、 (keypress (keypress)或(ngModelChange) 。 研究一下每一个，以使用最适合您的选项。 基本上，您可以处理每个迭代并在之前添加 0 或删除，例如，如果用户将其他值设置为 60 以上（例如）。

Answer 2

我认为您在这里尝试实现的称为输入掩码，其中将数据提供给输入，并且显示的值（可能还有底层存储的值）具有常规应用的某些格式。

有很多库可以帮助在任何给定的 JS 框架中实现这一点。

为此目的快速搜索 Angular 库会出现： https://www.npmjs.com/package/angular-input-masks

这里也有一些示例实现： https://css-tricks.com/input-masking/