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:

Answer

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/

Answer

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>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.