jQueryのfocusとblurを使えばフォームが便利になる

jQueryのfocusとblurを使えばフォームを便利にすることができます。focusとはinput要素などにカーソルが合った時のイベントのことで、blurは逆にそれが外れた時のイベントです。今回はこれを使ってfocusの時に空のdiv要素にテキストを挿入して、blurの時にそれをまた空にするといったサンプルを作ってみました。とても基本中の基本なのであまり実用性はないかもしれませんが、とりあえずこんな感じで使うんだなっていうのを知るためだけの備忘録です。

[ads_center]

focusとblurのサンプル

空のdiv要素を置いておいて、input要素にfocusした時に「名前を入力して下さい」と表示されるようにします。そして、input要素がblurになったらdiv要素をまた空にします。まずはHTMLからです。

<div id="box"></div>
<label for="name">Name: </label><input type="text" id="name" />

そして、CSSでfocusされた時のスタイルを作っておきます。focusというクラスはfocusされた時にinput要素に追加するクラスです。

#box {
	font-size: 12px;
	color: red;
}
.focus {
	border: 3px solid red;
}

で、あとはjQueryです。

$(function(){
	$('#name').focus(function(){
		$('#box').text('*名前を入力して下さい');
		$(this).addClass('focus');
	}).blur(function(){
		$('#box').empty();
		$(this).removeClass('focus');
	});
});

これで、できたサンプルがこちらです。

まあすごいどうでもいいんですが、一応こんな感じで使っていくみたいですね。これを色々と応用していけばフォームのバリデーションにも使えますね。