jQuery defaultText plugin

Description

"defaultText plugin" is a jQuery plug-in designed for handling textbox. A "default" message will be displayed in the text box, by pressing any key or focus on the box, the default Text will be disappeared.

Update

This plugin has been updated on September 15, 2009, for the following modifications:

1. It is now compatible to Table AddRow plugin by adding data("init") function

Demonstration

Example #1

<div style="border:1px #00A solid;padding:20px;">
<form action="#" method="get">
<p>Name:<?php echo($_GET["name"]) ?><p>
<p>Age:<?php echo($_GET["age"]) ?><p>
<p>
Name:<input type="text" name="name" class="useDefault" value="<?php echo($_GET["name"]) ?>" rel="Please enter your name" size="20"/><br/>
Age:<<nput type="text" name="age" class="useDefault" value="<?php echo($_GET["age"]) ?>" rel="Please enter your age" size="20"/><br/>
<input type="submit" value="submit"/><br/>
</p>
</form>
</div>
<script type="text/javascript">
$("document").ready(function(){
	$(".useDefault").addDefaultText();
});
</script>

Example #2 : Mixing Table AddRow Plugin

<table border="1">
<tr><td colspan="4">Enter Your Information</td></tr>
<tr><td>Email</td><td><input type="text" size="24" class="useDefault" rel="Enter your Email here."/></td>
<td><input type="button" class="addRow" value="Add Row"/></td>
<td><input type="button" class="delRow" value="Delete Row"/></td></tr>
<tr><td>Email</td><td><input type="text" size="24" class="useDefault" rel="Enter your Email here."/></td>
<td><input type="button" class="addRow" value="Add Row"/></td>
<td><input type="button" class="delRow" value="Delete Row"/></td></tr>
</table>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.defaultText.js"></script>
<script type="text/javascript" src="/js/jquery.table.addrow.js"></script>
<script type="text/javascript">
$("document").ready(function(){
	$(".useDefault").addDefaultText();
	$(".addRow").btnAddRow();
	$(".delRow").btnDelRow();
});
</script>

jQuery Plugin Source Code

The following is the source code of the jQuery Plugin.

<script type="text/javascript">
(function($){
	var className="DefaultText";
	function DefaultText(target){
		if(target) {
			this.init(target);
			if(!this.target.data("init")) 
				this.target.data("init",[]);
			this.target.data("init").push(function(e){
				new DefaultText(e);
			});
		}
	}
	DefaultText.prototype.init=function(target){
		this.className=className;
		this.target=$(target).data(className,this);
		this.defaultText=""+this.target.attr("rel");
		if(this.isDefault()) 
			this.setDefault();
		else 
			this.setNormal();
		this.seed=Math.round(Math.random()*10000);
		this.target.addClass(className+this.seed)
		.closest("form").submit(function(){
			$("input:text",this).each(function(){
				if(typeof $(this).data(className)!="undefined" 
				&& $(this).data(className).isDefault()) 
					$(this).data(className)
					.clear();
			})
		})
	}
	DefaultText.prototype.setDefault=function(){
		this.target
		.css({color:"#AAA"})
		.val(this.defaultText);
	};
	DefaultText.prototype.setNormal=function(){
		this.target
		.css({color:"#000"});
	};
	DefaultText.prototype.clear=function(){
		if(this.target.attr("value")==this.target.attr("rel"))
			this.target
			.css({color:"#000"})
			.attr("value","")
	};
	DefaultText.prototype.isDefault=function(){
		return (this.target.attr("value")==this.target.attr("rel") 
			|| this.target.attr("value")=="")
	};
	DefaultText.prototype.live=function(){
		if (!this.goLive){
			$("."+className+this.seed)
			.live("click",function(){
				if(!$(this).data(className)) new DefaultText(this);
				$(this)
				.unbind("blur")
				.blur(function(){
					if($(this).data(className).isDefault()) 
						$(this).data(className)
						.setDefault();
					else 
						$(this).data(className)
						.setNormal();
				})
				.data(className)
				.clear();
			}).live("keydown",function(){
				if(!$(this).data(className)) new DefaultText(this);
				$(this)
				.unbind("blur")
				.blur(function(){
					if($(this).data(className).isDefault()) 
						$(this).data(className)
						.setDefault();
					else 
						$(this).data(className)
						.setNormal();
				})
				.data(className)
				.clear();
			});
			this.goLive=true;
		}
		return this
	};
	$.fn.addDefaultText=function(){
		this.each(function(){
			new DefaultText(this).live();
		});
		return this
	};
})(jQuery);
</script>

Download the plugin

Click the link for downloading the plugin.

Copyright and licensing

All the plugin source codes and the examples are copyright of C. F., Wong
Please feel free to use any code listed in this page, they are licensed under the MIT License:
http://www.opensource.org/licenses/mit-license.php