Bootstrap扁平带浮动标签表单js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 Bootstrap扁平带浮动标签表单js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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, shrink-to-fit=no">
<title>Bootstrap扁平带浮动标签表单</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/materialFormStyles.css">
</head>
<body>
<div class="htmleaf-container">
	<div class="container" id="formOutterWrapper">
		<div class="container" id="formInnerWrapper">
				<form id="materialForm" class="form" method="post" action="" role="form" autocomplete="off">
					<div class="form-group">
						<div class="col-xs-6">
							<label class="labels" for="firstName">用户名称</label>
							<input type="text" class="formInput" id="firstName" name="firstName">
						</div>
						<div class="col-xs-6">
							<label class="labels" for="lastName">昵　称</label>
							<input type="text" class="formInput" id="lastName" name="lastName">
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-6">
							<label class="labels" for="email">电子邮件</label>
							<input type="text" class="formInput" id="email" name="email">
						</div>
						<div class="col-xs-6">
							<label class="labels" for="phone">联系电话</label>
							<input type="tel" class="formInput" id="phone" name="phone">
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-12">
							<label class="labels" for="description">项目描述</label>
							<input type="text" class="formInput" id="description" name="description">
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-12">
							<button type="button" class="btn btn-primary green flatButton" id="submit">提交</button>
						</div>
					</div>
				</form>
		</div>
	</div>
</div>

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/materialForm.js"></script>
</body>
</html>

JS代码(materialForm.js):

var label;
	var target;
	var checkMark = "fa-check";
	//set the font-awesome icon classvar iconSize = 'fa-2x';
	//set iconSizefunction Form(){
}
Form.prototype.alterForm= function(){
	$('input').focus(function(e){
	form.setLabel(e.target);
	form.checkFocused();
}
);
	$('input').focusout(function(e){
	form.setLabel(e.target);
	form.checkUnfocused(e.target);
}
);
}
;
	Form.prototype.setLabel = function(target){
	label= $('label[for='+target.id+']');
}
;
	Form.prototype.getLabel = function(){
	return label;
}
;
	Form.prototype.checkFocused= function(){
	form.getLabel().addClass('active','');
}
;
	Form.prototype.checkUnfocused= function(target){
	if($(target).val().length == 0){
	form.getLabel().removeClass('active');
	if(form.addCheckMark(target)){
	form.getLabel().next().remove();
}
}
else if(!$(form.getLabel()).next().is($(checkMark))){
	form.getLabel().after("<span class='fa "+iconSize+" "+checkMark+"'></span>")}
}
;
	Form.prototype.addCheckMark = function(){
	if(form.getLabel().next().is($("."+ checkMark +""))){
	return true;
}
else{
	return false;
}
}
;
	form = new Form();
	function initialize(){
	form.alterForm();
}
initialize();

CSS代码(materialFormStyles.css):

/*Media Queries*/
@media(max-width:768px){#description{margin-bottom:10% !important;}
#formInnerWrapper{margin-top:5% !important;}
.formInput{margin-bottom:30% !important;}
#materialForm{margin-top:10% !important;}
}
@media(max-width:480px){.formInput{margin-bottom:70% !important;}
}
body{background-color:#3498db;font-family:'Lato',sans-serif;}
.flatButton{box-shadow:0px 1px 3px 0px rgba(0,0,0,.4);border:none;text-align:center;}
.green{background-color:#1DE9B6;}
.fa-check{float:right;margin-left:85%;position:absolute;z-index:0;transition:all .2s;color:#1DE9B6 !important;}
#formOutterWrapper{margin-top:2%;padding:0;}
#formInnerWrapper{margin-top:25px;background-color:#ffffff;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);border-radius:2px;height:500px;}
#materialForm{margin-top:7%;}
#description{margin-bottom:5%;}
input,label{display:block;}
label{color:#212121;position:absolute;font-size:20px;font-weight:400;transition:all .2s}
input{margin-top:10px;}
.formInput{background-color:transparent;border-top:none;border-left:none;border-right:none;border-bottom:2px solid #E1E1E1;width:100%;margin-bottom:15%;color:#8C8C8C;}
input:focus{outline:none;color:#3498db;border-bottom:2px solid #2980b9;-webkit-transition:border-bottom .5s;-moz-transition:border-bottom .5s;-ms-transition:border-bottom .5s;-o-transition:border-bottom .5s;transition:border-bottom .5s;}
.active{transform:translateY(-140%);font-size:14px;}
#submit:hover{background-color:#18E997;}
#close{display:block;position:absolute;cursor:pointer;left:5px;z-index:999;margin-right:0;padding-right:0;padding-left:0;color:#ffffff;}
#close:hover{color:#c0392b;}

附件:下载该文件资源,减少时间成本(增值服务)