Hatena::ブログ(Diary)

Higé au lait Twitter

 | 

2009年02月03日

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

mota5mota5 2009/02/03 23:23 実行してみました。面白いですね。ちなみに、(function($) {}(jQuery)と書くのは、{}内で使用する$に対して、$=jQueryという方程式を保証させたいからでしょうか?prototype.jsなどと競合しないように。

 |