Geek Answers Handbook

How do I create a credit card expiration date input field to include spaces and slashes?

I am wondering how I can style to create one input field (type = text) to display with spaces and a slash between numbers, for example:

Credit card expiry field

I know how to limit the input of numbers and perform validation. This is not what I ask. I am wondering what the actual display is. Can you use CSS to do this somehow, separating the first two digits of MM from the last two digits of YY?

I want the user to be able to enter only 4 digits and display them as: MM / YY

(Another question from How to format credit card entry fields and expiration dates . This question is about verification.)

+4
source share
3 answers

Read the first few characters and save them in a variable. then read the last characters and write them into another variable ... Then merge the space between them.

How to get the last characters of a string using JavaScript

Get the first 2 characters of the this.title attribute and call the corresponding identifier

Or, you have 2 fields and CSS styles to make them look like one field.

+1
source

You can accomplish this by using two input fields, removing the border of the input fields, adding a border to the wrapper element so that it appears as a single input, and the space /between them. - jsFiddle Demo

HTML

 <span class="expiration">
    <input type="text" name="month" placeholder="MM" maxlength="2" size="2" />
    <span>/</span>
    <input type="text" name="year" placeholder="YY" maxlength="2" size="2" />
</span>

CSS

.expiration {
    border: 1px solid #bbbbbb;
}
.expiration input {
    border: 0;
}

Result

input field data slash

CSS, , , , .

<span>, , .

+5

, , :

<div class="fakeinput">
    <input type="text" size="2" class="mini_input" />
    <div class="slash">/</div>
    <input type="text" size="2" class="mini_input" />
</div>

CSS:

.fakeinput{display:block; border:1px solid #ccc; background:#f9f9f9; width:50px;}
.fakeinput *{display:inline-block; color:#555; vertical-align:middle}
.mini_input{width:15px; font-size:10px; border:none; background:none; box-shadow:none; padding: 3px 0 5px 5px}

, .

, UX, , , , , ,

btw, ,

Alternatively, if you want only one field, you can do this:

<input name="date" type="text" value="/" onblur="if (this.value=='') this.value = '/'"   onfocus="if (this.value=='some text') this.value = ''"  />

and then use the BuddhistBeast solution that looks really beautiful, so you cover all the bases with only one field

0
source

More articles:


All Articles