|
0
|
1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|
|
2 |
"http://www.w3.org/TR/html4/strict.dtd"> |
|
|
3 |
<html> |
|
|
4 |
<head> |
|
|
5 |
<title>JavaScript form input mask demonstration</title> |
|
|
6 |
<meta name="description" content="Demonstrates how unobtrusive JavaScript can implement input masks in HTML form elements" /> |
|
|
7 |
<script type="text/javascript" language="javascript" src="../files/prototype.js" ></script> |
|
|
8 |
<script type="text/javascript" language="javascript" src="html-form-input-mask.js"></script> |
|
|
9 |
<style type="text/css"> |
|
|
10 |
input.text, textarea, select { |
|
|
11 |
font-size: 1.1em; |
|
|
12 |
line-height: 1.3em; |
|
|
13 |
border-color: #7C7C7C #C3C3C3 #DDD; |
|
|
14 |
border-style: solid; |
|
|
15 |
border-width: 1px; |
|
|
16 |
background: #FFF url(../files/fieldbg.gif) repeat-x top; |
|
|
17 |
} |
|
|
18 |
label { |
|
|
19 |
width: 400px; |
|
|
20 |
display: block; |
|
|
21 |
text-align: right; |
|
|
22 |
} |
|
|
23 |
</style> |
|
|
24 |
</head> |
|
|
25 |
|
|
|
26 |
<body onload="Xaprb.InputMask.setupElementMasks()" > |
|
|
27 |
|
|
|
28 |
<h1>JavaScript form input mask demonstration</h1> |
|
|
29 |
|
|
|
30 |
<p>The following form fields use unobtrusive JavaScript to implement "input |
|
|
31 |
masks." The maximum field length is automatically limited to the length of |
|
|
32 |
the mask. The characters you can enter into the fields are constrained, and |
|
|
33 |
separators are automatically added, but no actual value checking is done. For |
|
|
34 |
example, the date input is constrained to the general format for a date, but |
|
|
35 |
you can enter an invalid date into the field.</p> |
|
|
36 |
|
|
|
37 |
<form action="" method="get"> |
|
|
38 |
|
|
|
39 |
<label for="input_date">Date (US format) |
|
|
40 |
<input id="input_date" type="text" class="text input_mask mask_date_us" /> |
|
|
41 |
</label> |
|
|
42 |
<label for="input_time">Time |
|
|
43 |
<input id="input_time" type="text" class="text input_mask mask_time" /> |
|
|
44 |
</label> |
|
|
45 |
<label for="input_phone">Phone number |
|
|
46 |
<input id="input_phone" type="text" class="text input_mask mask_phone" /> |
|
|
47 |
</label> |
|
|
48 |
|
|
|
49 |
</form> |
|
|
50 |
|
|
|
51 |
</body> |
|
|
52 |
</html> |