jQuery实现渐隐表单提示js代码

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

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

以下是 jQuery实现渐隐表单提示js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>In-Field Labels jQuery Plugin</title>
	<link rel="stylesheet" href="css/layout.css" type="text/css" media="all" charset="utf-8" />
	<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery.infieldlabel.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
		$(function(){ $("label").inFieldLabels(); });
	</script>
	<!--[if lte IE 6]>
		<style type="text/css" media="screen">
			form label {
					background: #fff;
			}
		</style>
	<![endif]-->
</head>

<body>
	<h1>In-Field Labels jQuery Plugin</h1>
<div class="body"><h2>Samples</h2></div>
	<form action="index.html" method="get" accept-charset="utf-8">
		<fieldset>
			<legend>Comment Form</legend>
			<p>
				<label for="name">Name</label><br />
				<input type="text" name="name" value="" id="name">
			</p>
			<p>
				<label for="email">Email</label><br />
				<input type="text" name="email" value="" id="email">
			</p>
			<p>
				<label for="website">Website</label><br />
				<input type="text" name="website" value="" id="website">
			</p>
			<p>
				<label for="comment">Comment</label><br />
				<textarea cols="30" rows="10" name="comment" id="comment"></textarea>
			</p>
		</fieldset>
		<p><input type="submit" value="Continue &rarr;"></p>
	</form>
	
	<form action="index.html" method="get" accept-charset="utf-8">
		<fieldset>
			<legend>Login Form</legend>
			<p>
				<label for="username">Username</label><br />
				<input type="text" name="username" value="" id="username">
			</p>
			<p>
				<label for="password">Password</label><br />
				<input type="password" name="password" value="" id="password">
			</p>
		</fieldset>
		<p><input type="submit" value="Continue &rarr;"></p>
	</form>

</body>
</html>

JS代码(jquery.infieldlabel.min.js):

/* * In-Field Label jQuery Plugin * http://fuelyourcoding.com/scripts/infield.html * * Copyright (c) 2009 Doug Neiner * Dual licensed under the MIT and GPL licenses. * Uses the same license as jQuery,see:* http://docs.jquery.com/License * * @version 0.1 */
(function($){
	$.InFieldLabels=function(b,c,d){
	var f=this;
	f.$label=$(b);
	f.label=b;
	f.$field=$(c);
	f.field=c;
	f.$label.data("InFieldLabels",f);
	f.showing=true;
	f.init=function(){
	f.options=$.extend({
}
,$.InFieldLabels.defaultOptions,d);
	if(f.$field.val()!=""){
	f.$label.hide();
	f.showing=false}
;
	f.$field.focus(function(){
	f.fadeOnFocus()}
).blur(function(){
	f.checkForEmpty(true)}
).bind('keydown.infieldlabel',function(e){
	f.hideOnChange(e)}
).change(function(e){
	f.checkForEmpty()}
).bind('onPropertyChange',function(){
	f.checkForEmpty()}
)}
;
	f.fadeOnFocus=function(){
	if(f.showing){
	f.setOpacity(f.options.fadeOpacity)}
}
;
	f.setOpacity=function(a){
	f.$label.stop().animate({
	opacity:a}
,f.options.fadeDuration);
	f.showing=(a>0.0)}
;
	f.checkForEmpty=function(a){
	if(f.$field.val()==""){
	f.prepForShow();
	f.setOpacity(a?1.0:f.options.fadeOpacity)}
else{
	f.setOpacity(0.0)}
}
;
	f.prepForShow=function(e){
	if(!f.showing){
	f.$label.css({
	opacity:0.0}
).show();
	f.$field.bind('keydown.infieldlabel',function(e){
	f.hideOnChange(e)}
)}
}
;
	f.hideOnChange=function(e){
	if((e.keyCode==16)||(e.keyCode==9))return;
	if(f.showing){
	f.$label.hide();
	f.showing=false}
;
	f.$field.unbind('keydown.infieldlabel')}
;
	f.init()}
;
	$.InFieldLabels.defaultOptions={
	fadeOpacity:0.5,fadeDuration:300}
;
	$.fn.inFieldLabels=function(c){
	return this.each(function(){
	var a=$(this).attr('for');
	if(!a)return;
	var b=$("input#"+a+"[type='text'],"+"input#"+a+"[type='password'],"+"textarea#"+a);
	if(b.length==0)return;
	(new $.InFieldLabels(this,b[0],c))}
)}
}
)(jQuery);

CSS代码(layout.css):

@import 'reset.css';html{background:#222;}
body{width:460px;margin:0 auto;padding:0 0 40px 0;background:#eee;font-family:Helvetica,Arial;}
h1{background-color:#FC7600;color:#fff;font-size:1.6em;padding:30px 20px 15px 20px;margin-bottom:20px;}
#header{padding:0 20px;}
.body li{margin-bottom:10px;}
.body p,#header p{color:#555;line-height:160%;margin-bottom:10px;}
.body p,#header small{font-size:10pt;color:#777;display:block;line-height:140%;}
.body strong,#header strong{color:#000;font-weight:bold;}
.body a,#header a{color:#444;}
.body a:hover,#header a:hover{color:#000;}
form legend{color:#333;padding:0 0 20px 0;text-transform:uppercase;}
form{padding:0 20px 20px 20px;}
form,form fieldset input,form fieldset textarea,form label{font-family:Helvetica,Arial;font-size:12pt;}
form p{position:relative;margin:10px 0;}
form p label{position:absolute;top:0;left:0;}
form p br{display:none;}
form fieldset p input,form fieldset p textarea{display:block;padding:4px;width:400px;margin:0;}
form fieldset p label{width:380px;display:block;margin:5px 5px 5px 6px;padding:0;}
form fieldset p textarea{padding:2px;width:404px;}
form fieldset p textarea,form fieldset p input{border:solid 1px #ccc;}
form fieldset p label{color:#777;}
.body{padding:0 20px;}
h2{color:#aaa;font-size:4em;padding:30px 0 10px 0;letter-spacing:-3px;font-weight:normal;}
pre{font-size:10pt;font-family:"Courier New";background:#000;padding:10px 5px;color:#fff;}
tt{font-family:"Courier New";font-weight:bold;color:#000;}
.body ul{padding:0 0 10px 20px;margin:0 0 0 20px;list-style:disc;font-size:0.8em;}

CSS代码(reset.css):

/*Written by Eric MyerSource:http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
/* remember to define focus styles! */
:focus{outline:0;}
body{line-height:1;color:black;background:white;}
ol,ul{list-style:none;}
/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:normal;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}

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