お問い合わせフォームなどで入力する際、入力フォームのフォーカス状態を視覚的に判断させる為に
フォーカスされている入力エリアの背景色を変化させる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が必要になった際に是非。。。

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

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (3)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

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

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR