フォーム内の文字をフォーカスで消すjQuery-Plugin 「clearField」

/**
 * jQuery-Plugin "clearField"
 * 
 * @version: 1.1, 04.12.2010
 * 
 * @author: Stijn Van Minnebruggen
 *          stijn@donotfold.be
 *          http://www.donotfold.be
 * 
 * @example: $('selector').clearField();
 * @example: $('selector').clearField({ blurClass: 'myBlurredClass', activeClass: 'myActiveClass' });
 * 
 */

(function($) {

$.fn.clearField = function(settings) {
	settings = jQuery.extend({
	blurClass: 'clearFieldBlurred',
	activeClass: 'clearFieldActive',
	attribute: 'rel',
	value: ''
}, settings);
		
return $(this).each(function() {
	var el = $(this);
	settings.value = el.val();
	if(el.attr(settings.attribute) == undefined) {
	el.attr(settings.attribute, el.val()).addClass(settings.blurClass);
	} else {
	settings.value = el.attr(settings.attribute);
	}
	el.focus(function() {
		if(el.val() == el.attr(settings.attribute)) {
			el.val('').removeClass(settings.blurClass).addClass(settings.activeClass);
		}
				
	});
			
	el.blur(function() {
		if(el.val() == '') {
			el.val(el.attr(settings.attribute)).removeClass(settings.activeClass).addClass(settings.blurClass);
		}
				
	});
			
			
});//return
		
};//fn.clearField
	
})(jQuery);

こんなのがあった。

フォームに、文字を表示させておいてフォーカスがあったら、その文字を消すjQueryプラグイン。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.clearfield.js"></script>
<script>
$(document).ready(function() {
	$('.clearField').clearField();
});
</script>

で読み込みと設定。
あとはCSSセレクタが「.clearField」なんで、目的のinputタグやtextareaに「class="clearField"」でオッケー。

詳しくはこちらから。


いや、まあ…「HTML5のplaceholder属性」使えばイイって話なんですけどね。。。