How to show a zero before the all 0-9 numbers that input in the textbox?

Question

Here is the Example

  <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>

• SO i want to add 00,01,02,03....... in the textbox. I expecting a answer related to the angular component.

- Importent...................

If i type a number in the textbox number must be 00,01,02... like this without focusOut in the textbox, As well as if i use up and down arrows in the text box numbers must be 00,01.02........

Answer 1

You can use the events (change) , (keypress) or (ngModelChange) if you are using a model. Research a bit about each one to use the best option for you. Basically you can process each iteraction and add a 0 before or remove if for example user set other value over 60 (for example).

Answer 2

What I think you're trying to implement here is called an input mask, where data is provided to an input and the displayed value (and perhaps also the underlying stored value) has certain formatting routinely applied to it.

There are a bunch of libraries which help in acheiving this in any given JS framework.

A quick google of Angular libraries for this purpose brings up: https://www.npmjs.com/package/angular-input-masks

There are a few example implementations here too: https://css-tricks.com/input-masking/