jQueryを使って入力フォームでフォーカス時に背景色を変えるスクリプトのサンプル

お問い合わせフォームなどで入力する際、入力フォームのフォーカス状態を視覚的に判断させる為に
フォーカスされている入力エリアの背景色を変化させるUI（エフェクト？）があります。

jQueryを使えばとても簡単に組み込める動作ですが、
最近、たまたま業務で立て続けに需要があり、
ここでは紹介してなかった動作だったのでサンプル作ってみました。

まずは動作サンプルは以下から。

jQuery INPUT FOCUS【SAMPLE】

＜input＞と＜textarea＞をクリックなどでフォーカス状態にすると
背景色を水色に変更させます。

この動作の内部構成について。

HTML側では特別な指定はしないので
単純な入力系エリア用の＜input type=”text”＞や＜textarea＞といったタグを記述しておきます。

そしてCSSではフォーカス状態になった際に、
変更させる背景色のパターンを、クラスとして一つ用意します。
※今回のサンプルではクラス名を「.focus」とします。

◆CSS
.focus {
	background: #ccccff;
}

そしてスクリプト。

＜input type=”text”＞や＜textarea＞タグに対してフォーカス状態になった際に
自身のタグにCSSクラス「.focus」を追加します。

クラス追加後、そのタグからフォーカスが外れた際、
「.focus」のクラスは自身のタグから削除します。

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$('input[type=text],textarea').focus(function(){
		$(this).addClass('focus');
	}).blur(function(){
		$(this).removeClass('focus');
	});
});
</script>

これだけで実装可能です。

フォーカスされるとCSSクラス「.focus」が追加されることで背景色を変化させ、
フォーカスが外れるとCSSクラス「.focus」が削除され、背景色を元に戻しています。

単純な動作のUIですが、こういった細かな配慮が
ユーザーのストレスを少しでも軽減することに繋がるかもしれません。

入力フォームで背景を変化させるUIが必要になった際に是非。。。

サンプルファイルをダウンロードしたい方はこちらから