How do I make a html input have static characters (input mask) that stay when the user types? [closed]
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.
Answers:
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:
There are three methods that I know of, but none are really practical.
Wrap a label around the input and add ::before content
<label><input type="text" /></label>
label { position: relative; }
label::before {
position: absolute;
top: 0;
z-index: 1;
color: red;
font-family: monospace;
content: "\00a0\00a0\00a0\00a0/\00a0\00a0/\00a0\00a0\00a0:";
}
Use multiple inputs, and make them appear as one
<div id="wrapper">
<input class="x" type="text" maxlength="4" placeholder="YYYY" />/<!--
--><input class="x" type="text" maxlength="2" placeholder="MM" />/<!--
--><input class="x" type="text" maxlength="2" placeholder="DD" />,<!--
--><input class="x" type="text" maxlength="2" placeholder="hh" />:<!--
--><input class="x" type="text" maxlength="2" placeholder="mm" />
</div>
#wrapper { display: inline-block; background-color: #FFF; border: 1px solid #000; }
.x { border: none; }
.x:first-of-type { width: 4em; }
.x:not(:first-of-type) { width: 2em; }
Use another "readonly" and pointer-events:none absolutely positioned input
<div id="wrapper2">
<input type="text" />
<input id="over" type="text" readonly value="YYYY/MM/DD hh:mm" />
</div>
#wrapper2 { position: relative; display: inline-block; }
#over { position: absolute; top: 0; pointer-events: none; background: none; opacity: 0.5; }
label { position: relative; }
label::before {
position: absolute;
top: 0;
z-index: 1;
color: red;
font-family: monospace;
content: "\00a0\00a0\00a0\00a0/\00a0\00a0/\00a0\00a0\00a0:";
}
#wrapper { display: inline-block; background-color: #FFF; border: 1px solid #000; }
.x { border: none; }
.x:first-of-type { width: 4em; }
.x:not(:first-of-type) { width: 2em; }
#wrapper2 { position: relative; display: inline-block; }
#over { position: absolute; top: 0; pointer-events: none; background: none; opacity: 0.5; }<label><input type="text" /></label>
<div id="wrapper">
<input class="x" type="text" maxlength="4" placeholder="YYYY" />/<!--
--><input class="x" type="text" maxlength="2" placeholder="MM" />/<!--
--><input class="x" type="text" maxlength="2" placeholder="DD" />,<!--
--><input class="x" type="text" maxlength="2" placeholder="hh" />:<!--
--><input class="x" type="text" maxlength="2" placeholder="mm" />
</div>
<div id="wrapper2">
<input type="text" />
<input id="over" type="text" readonly value="YYYY/MM/DD hh:mm" />
</div>