forked from estelle/input-masking
-
Notifications
You must be signed in to change notification settings - Fork 0
/
indexcss.html
75 lines (72 loc) · 2.14 KB
/
indexcss.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!doctype html>
<html lang="en-us">
<head>
<title>Masking</title>
<link rel="stylesheet" href="css/masking-input.css"/>
<style>
head {
display: block;
}
head * {
display: none;
}
[contenteditable] {
-webkit-user-modify: read-write-plaintext-only;
}
#editme { white-space: pre;
display: block;
margin: 20px;
font-family: monospace;
-webkit-user-modify: read-write-plaintext-only;
-moz-user-modify: read-write;
user-modify: read-write;
border: 1px solid #ccc;
padding: 10px 20px;
width: 50%;
margin-bottom: 5rem;
height: 6rem;
overflow: scroll;
}
body {
margin: 20px;
line-height: 1.6;
}
p {
padding-right: 40px;
}
ul, style {transform: scale(1.625); transform-origin: top left;}
</style>
<style id="editme" contenteditable>
/* additional styles */
li {line-height: 2; clear: both;}
label {display: inline-block; width: 200px;}
.shell span {color: pink;}
li {font-family: helvetica; font-size: 0.93rem;}
</style>
</head>
<body>
<ul>
<li>
<label for="expiration">Credit Card Expiration Month</label>
<input id="expiration" type="tel" placeholder="MM/YY" class="masked" pattern="(1[0-2]|0[1-9])\/\d\d" data-valid-example="11/18" title="2-digit month and 2-digit year greater than 01/15">
</li>
<li>
<label for="zip">Zip Code</label>
<input id="zip" type="tel" name="zipcode" placeholder="XXXXX" pattern="\d{5}" class="masked" title="5-digit zip code">
</li>
<li>
<label for="zipca">Canadian Zip Code</label>
<input id="zipca" type="text" name="zipcodeca" placeholder="XXX XXX" pattern="\w\d\w \d\w\d" class="masked" data-charset="_X_ X_X" title="6-character alphanumeric zip code in the format of A1A 1A1">
</li>
<li>
<label for="tel">Telephone</label>
<input id="tel" type="tel" name="phone" placeholder="(XXX) XXX-XXXX" pattern="\(\d{3}\) \d{3}\-\d{4}" class="masked" title="10-digit number">
</li>
<li>
<label for="cc">Credit Card Number</label>
<input id="cc" type="tel" name="ccnumber" placeholder="XXXX XXXX XXXX XXXX" pattern="\d{4} \d{4} \d{4} \d{4}" class="masked" title="16-digit number">
</li>
</ul>
<script src="js/input-mask.min.js" data-autoinit="true"></script>
</body>
</html>