jQuery フォームをフォーカスする、はずすで発動

テキスト入力欄をクリックして、フォーカスがあたったとき、またはフォーカスが外れたとき、発動するサンプルです。

テキストフォームを設置したら、ユーザーの入力を補助したり、促したりする機能を作るシーンがあります。

そんな時はjQueryの以下のメソッドを使うと便利です。

入力欄をクリックしてください


$(document).ready(function(){

	$("#demo_input").focus( function () {
		$(".demo_log").html("入力欄がフォーカスされました");
	});

	$("#demo_input").blur( function () {
		$(".demo_log").html("フォーカスが外れました");
	});

});

html

<input type="text" id="demo_input" placeholder="入力欄">
<div class="demo_log">入力欄をクリックしてください</div>

focusのメソッドが入力欄をクリックされたときのトリガーで、blurがフォーカスが外れたときに発動するメソッドです。

上記のサンプルではそれぞれをきっかけにテキストが切り替わるサンプルです。

例えば次の入力欄は、はじめは黄色、クリックすると青、フォーカスを外すと赤に変わります。

黄色で目を引いて、青で落ち着いて入力してもらい、赤で離脱しないでほしい、といった狙いを込めた例です。（少し弱いですが）


	$("#demo_input2").focus( function () {
		$(this).removeClass("demo_notact").addClass("demo_act");
	});

	$("#demo_input2").blur( function () {
		$(this).removeClass("demo_act").addClass("demo_notact");
	});

上記のソースのようにクラスの入れ替えで実装しています。