如何在文本框中輸入的所有 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/