jquery.mask实现输入框格式化输入效果代码-html代码-BFW代码库

jquery.mask实现输入框格式化输入效果代码

代码语言：html

代码描述：jquery.mask实现输入框格式化输入效果代码，可实现时间手机号码、日期、电话号码、地区编号等格式化输入。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">

<style type="text/css">
body, html { font-size: 100%; 	padding: 0; margin: 0;}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

body{
	font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;
}
.container {
width: 773px;
}
h1 .jq-label {
font-size: 40px;
color: #CFCFCF;
display: block;
margin: 20px 0px 18px 6px;
}
h1 .plugin-name {
font-size: 80px;
color: #6BBEC7;
}
div#examples div.col {
width: 246px;
float: left;
}
div#examples div.col.center {
text-align: center;
}
div#examples div.col.center.banner {
border: 1px solid #ccc;
padding: 15px;
margin-top: 24px;
}
</style>
</head>
<body>
	
	<div class="container" style="margin-top:30px;">
		<h1><span class="jq-label">jQuery</span> <span class="plugin-name">Mask Plugin</span></h1>
		<span class="subltitle">一个用于字段格式的jQuery插件。 </span> <br />
		<br />
		<h2>Demonstrations</h2>
		<form>
			<div id="examples">
				<div class="col">
					<label>日期格式</label>
					<input type="text" class="date"/>
					<label>时间格式（小时）</label>
					<input type="text" class="time"/>
					<label>Date &amp; Hour</label>
					<input type="text" class="date_time"/>
					<label>地区号码</label>
					<input type="text" class="cep"/>
					<label>Zip-Code With Callbacks</label>
					<input type="text" class="cep_with_callback"/>
					<label>Crazy Zip-Code</label>
					<input type="text" class="crazy_cep"/>
					<label>货币</label>
					<input type="text" class="money"/>
				</div>
				<div class="col">
					<label>手机号码</label>
					<input type="text" class="phone"/>
					<label>带区号的座机号码</label>
					<input type="text" class="phone_with_ddd"/>
					<label>美国电话号码</label>
					<input type="text" class=&q.........完整代码请登录后点击上方下载按钮下载查看