jquery blurメソッド

TOPページに戻る > jquery入門

jquery blur()メソッド

blurメソッドは、セレクタで指定した要素のフォーカスが外れるときに処理を実行するメソッドです

$("セレクタ").blur(function(){
	フォーカスがはずれたときに実行する処理
});

指定した要素のフォーカスがはずれたときに処理を実行する

下記の場合は、input要素にvalメソッドで最初にテキストを表示しておき、フォーカス状態のときにテキストを非表示、フォーカスはずれたときにblurメソッドでテキストを表示しています。if文を使ってテキストが入力されてない場合のみ、テキストを表示しています

jquery

$(function(){
	$("input").val("メールを入力して下さい").focus(function(){
		$(this).val("");	
	}).blur(function(){
		if($(this).val()==""){
		$(this).val("メールを入力して下さい");
		}
	});
});

html

<fieldset>
<legend>メールフォーム</legend>
<p><label>メール入力欄:<input type="text" name="f2" value="" size="45"></label></p>
<p><button>送信</button></p>
</fieldset>

※サンプルのためサーバーには送信されません

メールフォーム

メール入力欄:

送信