How do I guide a user's input in HTML using a format?

Question

I understand the concept of the placeholder attribute, but I am trying to more strictly guide the user. Once the user enters data in the input field with the placeholder text, it vanishes, and I would like it to persist.

I am trying to have the user input a timestamp in the form of HH:MM. But I would like my input to first appear as __:__, where when a user enters a number, it replaces the _ with that number. When they reach the :, it skips over it, and the semicolon can never be deleted. I'm not exactly sure what phrase to google this scenario for, so I thought I would ask here.

“Input field mask” should do as a search term. – CBroe Apr 06 '16 at 17:05 — CBroe, Apr 06 '16 at 17:05
@CBroe Thanks for the tip! – user3334871 Apr 06 '16 at 17:22 — user3334871, Apr 06 '16 at 17:22

score 1 · Accepted Answer · answered Apr 06 '16 at 17:19

As mentioned by CBroe, the input field mask will help in your situation.

You can consider using plugins/libraries like:

They can be really helpful.

Cheers! Happy programming.

score 1 · Answer 2 · edited May 23 '17 at 11:50

1

Check out following links

Input Time masking using Jquery

More advanced way

Another one Jquery plugin

edited May 23 '17 at 11:50

Community

1
1

answered Apr 06 '16 at 17:21

Ameya

726
6
9

How do I guide a user's input in HTML using a format?

2 Answers2