How do I make a html input have static characters (input mask) that stay when the user types?

Question

I'm trying to make an input field on my website have a placeholder like this (note: the black characters are static input masks):

And if the user types into the input box it should look like this (note: the user did not have to type the mask characters):

When I tried to use the placeholder attribute the text disappear after the user types - which isn't what I want. It would be much better if there was a special syntax like yyyy/mm/dd hh:mm and the user was just able to write between the double dot (colon) and slashes.

I have no idea how to build something like this, and even Google doesn't understand what I'm trying to say.

EDIT: The feature I am trying to implement is called Input Masks.

Answer 1

If you're using jQuery for your project, this should be fairly easy to implement.

As David Thomas said in a comment on your original question, you need to used masked input. There's a great plugin for this (if you're using jQuery) that's really easy to implement, well documented and more or less does exactly what you want to do:

http://igorescobar.github.io/jQuery-Mask-Plugin/