我们讲解下使用maskedInput插件，maskedInput屏蔽输入框我们可以轻松指定想要得到的日期格式和手机格式等等
今天介绍使用maskedInput插件，使用该插件我们可以轻松自定义日期格式和电话格式，效果如下
效果如下
demo1
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>maskedInput</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//freemuban.com/js/507/jquery.maskedinput-1.2.2.js"></script>
<script type="text/javascript">
$(function(){
$('#date').mask('99/99/9999');
$('#phone').mask('(999) 999-9999');
})
</script>
<style type="text/css">
label { display:block; margin:4px; }
</style>
</head>
<body>
<h1>maskedInput屏蔽输入框</h1>
<form id="form1" action="" class="p1">
<label>日期：
<input id="date" type="text" tabindex="1" />
99/99/9999</label>
<label>电话：
<input id="phone" type="text" tabindex="3" />
(999) 999-9999</label>
</form>
</div>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>maskedInput</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//freemuban.com/js/507/jquery.maskedinput-1.2.2.js"></script>
<script type="text/javascript">
$(function(){
$.mask.definitions['~']='[+-]';
$('#date').mask('99/99/9999');
$('#phone').mask('(999) 999-9999');
$('#phoneext').mask("(999) 999-9999? x99999");
$("#tin").mask("99-9999999");
$("#ssn").mask("999-99-9999");
$("#product").mask("a*-999-a999",{placeholder:" ",completed:function(){alert("You typed the following: "+this.val());}});
$("#eyescript").mask("~9.99 ~9.99 999");
})
</script>
<style type="text/css"></style>
</head>
<body>
<h1>maskedInput屏蔽输入框</h1>
<form id="form1" action="">
<label>Date
<input id="date" type="text" tabindex="1" />
99/99/9999</label><br><br>
<label>Phone
<input id="phone" type="text" tabindex="3" />
(999) 999-9999</label><br><br>
<label>Phone + Ext
<input id="phoneext" type="text" tabindex="4" />
(999) 999-9999? x99999</label><br><br>
<label>Tax ID
<input id="tin" type="text" tabindex="5" />
99-9999999</label><br><br>
<label>SSN
<input id="ssn" type="text" tabindex="6" />
999-99-9999</label><br><br>
<label>Product Key
<input id="product" type="text" tabindex="7" />
a*-999-a999</label><br><br>
<label>Eye Script
<input id="eyescript" type="text" tabindex="8" />
~9.99 ~9.99 999</label>
</form>
</div>
</body>
</html>
demo3
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>maskedInput</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//freemuban.com/js/507/jquery.maskedinput-1.2.2.js"></script>
<script type="text/javascript">
$(function(){
$('#date').mask('99/99/9999');
$('#phone').mask('(999) 999-9999', {
placeholder:"?"
});
})
</script>
<style type="text/css">
label { display:block; margin:4px; }
</style>
</head>
<body>
<h1>maskedInput屏蔽输入框</h1>
<form id="form1" action="" class="p1">
<label>日期：
<input id="date" type="text" tabindex="1" />
99/99/9999</label>
<label>电话：
<input id="phone" type="text" tabindex="3" />
(999) 999-9999</label>
</form>
</div>
</body>
</html>
demo4
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>maskedInput</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//freemuban.com/js/507/jquery.maskedinput-1.2.2.js"></script>
<script type="text/javascript">
$(function(){
$.mask.definitions['0']='[0]';
$.mask.definitions['1']='[01]';
$('#date').mask('19/99/9999');
$('#phone').mask('(099) 999-9999');
})
</script>
<style type="text/css">
label { display:block; margin:4px; }
</style>
</head>
<body>
<h1>maskedInput屏蔽输入框</h1>
<form id="form1" action="" class="p1">
<label>日期：
<input id="date" type="text" tabindex="1" />
[01]9/99/9999</label>
<label>电话：
<input id="phone" type="text" tabindex="3" />
(099) 999-9999</label>
</form>
</div>
</body>
</html>
