文本框/域文字提示(placeholder)自动显示隐藏jQuery小插件

// 文本框文本域提示文字的自动显示与隐藏
(function($){
	$.fn.textRemindAuto = function(options){
		options = options || {};
		var defaults = {
			blurColor: "#999",
			focusColor: "#333",
			auto: true,
			chgClass: ""
		};
		var settings = $.extend(defaults,options);
		$(this).each(function(){
			if(defaults.auto){
				$(this).css("color",settings.blurColor);
			}
			var v = $.trim($(this).val());
			if(v){
				$(this).focus(function(){
					if($.trim($(this).val()) === v){
						$(this).val("");
					}
					$(this).css("color",settings.focusColor);
					if(settings.chgClass){
						$(this).toggleClass(settings.chgClass);
					}
				}).blur(function(){
					if($.trim($(this).val()) === ""){
						$(this).val(v);
					}
					$(this).css("color",settings.blurColor);
					if(settings.chgClass){
						$(this).toggleClass(settings.chgClass);
					}
				});
			}
		});
	};
})(jQuery);

使用

使用很简单，方法是：textRemindAuto，最简单是使用类似下面代码：

$(".remindAuto").textRemindAuto();

参数
三个可控参数，一是默认的失去焦点的文字颜色，一个是文本框获得焦点时的文字颜色，还有一个就是切换显示的class，参见下面的实例：

$("#test").textRemindAuto({
  blurColor: "green",
  focusColor: "red",
  chgClass: "change"
});