input に事前に値を入力しておく

input に事前に入力値を入力しておいてフォーカスするとその値が消える jQuery プラグインを書いた。

(function($) {

$.fn.preInput = function(txt, options) {
	var default_options = {
		class_name: 'pre-input'
	};

	options = $.extend(default_options, options || {});
	return this.each(function(){
		if(typeof this.value == 'undefined') return;

		var elm = $(this);
		elm.val(txt)
		elm.addClass(options.class_name)
		elm.focus(function(){
			if(elm.val() == txt) {
				elm.removeClass(options.class_name)
				elm.val('');
			}
		});
		elm.blur(function(){
			if(elm.val() == '') {
				elm.addClass(options.class_name)
				elm.val(txt)
			}
		});
	});
}

})(jQuery);

使い方

<input id="hoge" type="text" value="" />
$('#hoge').preInput('ここに入力してね');

デモ

一つ前の jQuery.eventDelay とあわせてデモを作った。
http://labo.higeorange.com/jquery/#preinput

追記 修正 2009/2/10 0:10

コード 8 行目
$.merge -> $.extend