Permalink
1a2e986 Jan 23, 2015
@digitalBush @gburghardt
50 lines (47 sloc) 2.72 KB
<html>
<head>
<title> jQuery Mask Test </title>
<script src="../lib/jquery-1.9.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/jquery.maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$.mask.definitions['~'] = "[+-]";
$("#date").mask("99/99/9999",{placeholder:"mm/dd/yyyy",completed:function(){alert("completed!");}});
$(".phone").mask("(999) 999-9999");
$("#phoneExt").mask("(999) 999-9999? x99999");
$("#iphone").mask("+33 999 999 999");
$("#tin").mask("99-9999999");
$("#ssn").mask("999-99-9999");
$("#product").mask("a*-999-a999", { placeholder: " " });
$("#eyescript").mask("~9.99 ~9.99 999");
$("#po").mask("PO: aaa-999-***");
$("#pct").mask("99%");
$("#phoneAutoclearFalse").mask("(999) 999-9999", { autoclear: false, completed:function(){alert("completed autoclear!");} });
$("#phoneExtAutoclearFalse").mask("(999) 999-9999? x99999", { autoclear: false });
$("input").blur(function() {
$("#info").html("Unmasked value: " + $(this).mask());
}).dblclick(function() {
$(this).unmask();
});
});
</script>
</head>
<body>
<table>
<tr><td>Date</td><td><input id="date" value="1231" type="text" tabindex="1" /></td><td>99/99/9999</td></tr>
<tr><td>Phone</td><td><input class="phone" type="text" tabindex="2"/></td><td>(999) 999-9999</td></tr>
<tr><td>Phone(Readonly)</td><td><input class="phone" type="text" tabindex="2" readonly/></td><td>(999) 999-9999</td></tr>
<tr><td>Phone + Ext</td><td><input id="phoneExt" type="text" tabindex="2"/></td><td>(999) 999-9999? x99999</td></tr>
<tr><td>Int'l Phone</td><td><input id="iphone" type="text" tabindex="2"/></td><td>+33 999 999 999</td></tr>
<tr><td>Tax ID</td><td><input id="tin" type="text" tabindex="3"/></td><td>99-9999999</td></tr>
<tr><td>SSN</td><td><input id="ssn" type="text" tabindex="4"/></td><td>999-99-9999</td></tr>
<tr><td>Product Key</td><td><input id="product" type="text" tabindex="5"/></td><td>a*-999-a999</td></tr>
<tr><td>Eye Script</td><td><input id="eyescript" type="text" tabindex="6"/></td><td>~9.99 ~9.99 999</td></tr>
<tr><td>Purchase Order</td><td><input id="po" type="text" tabindex="6"/></td><td>aaa-999-***</td></tr>
<tr><td>Percent</td><td><input id="pct" type="text" tabindex="6"/></td><td>99%</td></tr>
<tr><td>Phone (autoclear=false)</td><td><input id="phoneAutoclearFalse" type="text" tabindex="6"/></td><td>(999) 999-9999</td></tr>
<tr><td>Phone + Ext (autoclear=false)</td><td><input id="phoneExtAutoclearFalse" type="text" tabindex="6"/></td><td>(999) 999-9999? x99999</td></tr>
</table>
<div id="info"></div>
</body>
</html>