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

Does this answer your question? [How to output numbers with leading zeros in JavaScript](https://stackoverflow.com/questions/2998784/how-to-output-numbers-with-leading-zeros-in-javascript) — DCR, Jul 24 '20 at 18:16
@DCR I'm not the author of the question, but I can say it doesn't. OP wants a solution that change the value of an input while the user edits it. Your suggestion only discuss presentation of numbers as string. — Pedro Lima, Jul 24 '20 at 18:31

score 0 · Accepted Answer · answered Jul 24 '20 at 18:12

0

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

answered Jul 24 '20 at 18:12

Juan Antonio

2,451
3
24
34

I got like this "05" to variable in .TS component. That's variable is "return event;". Here is return 05 , 07 , 09 like that. I used "(ngModelChange)". Now problem is that value is not display in text box. how can i get to the text box ? – Jul 25 '20 at 15:37
Thank you so much, I got the output fire and event using (ngModelChange).! – Jul 25 '20 at 20:10

score 0 · Answer 2 · answered Jul 24 '20 at 18:34

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/

Thanks for your try! Actually this is OK. I can use this one also, But i want to get all the numbers that i entered i the text box like this 00,01,02,03........09 — , Jul 25 '20 at 17:17

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

Here is the Example

2 Answers2