jQueryを使ったフォームのイベント処理

input要素にマウスやタブキーで選択された状態を感知して発火します。

$(セレクタ).focus(function(){
	実行する処理
})

次のサンプルではテキストボックスに予め薄いグレーで「入力してください」と入力を促しておき、
ユーザーがテキストボックスを選択すると同時に「入力してください」の表示を消します。
このことでユーザーが入力の際に「入力してください」を自分で消去して入力を始める不便を解消します。

次にユーザーが入力を全くしないでテキストボックスを離れた場合は再度「入力してください」と表示させます。
今度は赤字で強めに警告するようにしました。

サンプル

$(function(){
	$('input').val('入力してください').css('color','#ccc').one('focus',function(){
		$(this).val('').css('color','#000');
	}).blur(function(){
		if($(this).val()==''){
			$(this).val('入力してください').css('color','#f00')
			.one('focus',function(){
				$(this).val('').css('color','#000');
			});
		}
	});
});

<input type="text" value="">

jQueryの解説

まずこのサンプルではinput要素は1つしか存在しませんので、jQueryオブジェクトに指定するセレクタはinputとしています。
val( value )は文字列、または配列で要素に設定したいvalue値を指定しますので、val(‘入力してください’)でinputのval属性値を「入力してください」に書き換えます。これはセッターメソッドですから、その後にメソッドチェーンで繋げることができます。
続いてはcssでテキストカラーを#ccc（グレー）に変えます。このメソッドもセッターメッソドですから更にメソッドチェーンが使用できます。
続いてはイベントの設定です。
本来ならここでfocusを使用したいところですが、focusを使用すると入力中にinput要素のフォーカスが外れると入力内容が削除されてしまいます。それを防止するためにイベント発生時に一度だけ実行するone()を使用しています。こうすることでfocusイベントが発生した初回のみ処理を実行するようになります。

$(セレクタ).one('イベント',(function(){
	実行する処理
})

続いては実行処理の内容です。thisはfocusのあたったセレクタになります。この場合はinputです。

thisにはクオテーションマーク(”),(“”)がつきませんので注意してください！

val(”)でval属性の中身を空にします。一見ゲッターのval()に見えますがvalの値を取得しているのではありません。
あくまで空の　’’をセットしているだけです。そしてこれはセッターメソッドですからメソッドチェーンがしようでします。
のでそのままcss(‘color’,’#000′)で文字色を黒に設定しています。

メソッドチェーンを可能な限り使用してjQueryオブジェクトを複数作成しないようになっています。jQueryオブジェクトを作成するには負担が大きい事を知っておくことです。

one()についてもメソッドチェーンが使用できます。

今度はフォーカスが外れた時の命令です。
ここでif文で判定をします。もし、valの値が”空ならという判定です。
もし入力内容が空でfocusが外れたら再び先ほどと同様に入力を促す値「入力してください」を表示させます。
今度は赤字で強く促しています。one()以降は先ほどと同様の内容が入ります。