ずいぶんと昔に書いたプラグインですが、今更ながらブログの記事に書いてみます。

HTML5では追加になったplaceholder属性は、フォームに予めテキストを表示させてアクセシビリティを上げてくれる属性です。主要なブラウザは（FF3.6以下は除く）対応していますが、案の定IE6/7/8/9は対応していません。なのでIEにplaceholder的なものを適用させる為にjQueryを用いて再現すると言うものです。

仕様

• IE6/7/8/9に対応
• HTML5のようにinputタグ、textareaタグにはplaceholder属性を用意

jQuery Code

(function($) {
	$.fn.placeholder = function(options) {
		var o = $.extend({
			watermarkSelector: 'form#watermark',
			className: 'focused'
		}, options);
		$(o.watermarkSelector).each(function() {
			$(this).find('[placeholder]').each(function() {
				$(this).attr('placeholder');
				if($(this).val() == '') {
					$(this).val($(this).attr('placeholder'));
				}
				$(this).focus(function() {
					if($(this).val() == $(this).attr('placeholder')) {
						$(this).val('').addClass(o.className);	
					}
				});
				$(this).blur(function() {
					if($(this).val() == '') {
						$(this).val($(this).attr('placeholder')).removeClass(o.className);	
					}
				});
			});
		});
		return this;
	}
})(jQuery);

それでは順を追ってjQueryコードを書きながら解説して行きます。

3行目〜6行目はオプションです。対象となるセレクタは当然formですが、念のため（特定のIDが付いたformに適用させたいとか...無いか）オプションで変更出来るようにしておきます。
classNameはフォーカスされたinput、textareaタグに付加されるクラス名を指定出来るようにしてあります。

$(this).find('[placeholder]').each(function() {
	$(this).attr('placeholder');
});

8行目で対象となるセレクタでplaceholder属性が付いている値を絞り込みます。IEはplaceholder属性を認識しないのでattr('placeholder')と書く事によってplaceholder属性を追加してやります。

if($(this).val() == '') {
	$(this).val($(this).attr('placeholder'));
}

対象となるセレクタの中に値が入力されていなかったらplaceholder属性に指定した値を入れます。

$(this).focus(function() {
	if($(this).val() == $(this).attr('placeholder')) {
		$(this).val('').addClass(o.className);	
	}
});

16行目からはフォーカスされた時のイベントです。input、textarea要素に表示されている値とplaceholder属性の値を比較して内容が同じだったらタグにclassNameをaddClass()を利用して付加し、値を空にします。

$(this).blur(function() {
	if($(this).val() == '') {
		$(this).val($(this).attr('placeholder')).removeClass(o.className);	
	}
});

22行目からはフォーカスから外れた時のイベントです。何も入力されなかったら再度placeholder属性の値をセットしてclassNameをremoveClass()を利用して消します。

以上です。呼び出す時にIE6/7/8/9を判別するためにjQuery.supportを利用します。ここらへんに関してはjQuery.supportでのブラウザ判別に詳しく書かれていますので、是非参考にしてみてください。

(function($) {
	if(!jQuery.support.noCloneEvent) {
		$.fn.placeholder();
	}
})(jQuery);

本当のplaceholder属性の挙動と若干違うのはご愛嬌。

View Demo

Download