このブログの検索フォームでも使用している、フォーカスすると消える文字(何も入力が無ければ初期値に戻す)を、jQueryだけで実装する方法を紹介します。

実装方法は凄く単純で、inputのvalueに予め文字列を入れておき、jQueryの設定ファイルに以下のコードを記述するだけです。

// フォーカスで消える文字
jQuery(function($) {
	var placeHolder = 'コメントを入力して下さい！';
	$("input[type='text']")
		.focus(function() {
			var self = $(this);
			if (self.val() === placeHolder) self.val("");
		})
		.blur(function() {
			var self = $(this);
			if (self.val() === "") self.val(placeHolder);
		});
});

input[@type='text']の部分は、通常のjQuery同様CSSの記法で指定して下さい。

補足説明

inputの初期文字列にマルチバイト文字(日本語など)を使いたい場合は、設定ファイルをHTMLの文字コードと合わせて保存するか、エンコードマニアックス辺りでJavaScript文字列にエンコードしてあげて下さい。

尚、この実装の為だけにjQueryを使うのはあまりに不毛なので、あくまでも他でjQueryを使用してる際の"おまけ"程度に考えて頂ければと思います。