jQuery API の blur( fn ) は、ブラーイベントにイベントハンドラをバインドしたいときに便利なメソッドだ。
要素からフォーカスを外したときに、blur( fn ) の引数に指定したイベントハンドラを呼び出すことができる。
記述方法
jQuery( セレクター ) . blur( イベンドハンドラ );
「セレクター」の要素のブラーイベントに、「イベンドハンドラ」をバインド。
input 要素での実装例（サンプル）
入力した文字：
input 要素での実装例（サンプル）の動作について
input 要素にテキストを入力しフォーカスを外すと、入力したテキストを「入力した文字： 」の右側に表示する。
input 要素での実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-blur-input' ) . blur( function () {
var str = jQuery( this ) . val();
jQuery( '#jquery-api-blur-input-contents' ) . text( str );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-blur-input' ) . blur( function () {
var str = jQuery( this ) . val();
jQuery( '#jquery-api-blur-input-contents' ) . text( str );
} );
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-api-blur-input {
margin: 0;
}
-->
</style>
<!--
#jquery-api-blur-input {
margin: 0;
}
-->
</style>
HTML
<p><input type="text" id="jquery-api-blur-input" name="jquery-api-blur-input"></p>
<p>入力した文字： <span id="jquery-api-blur-input-contents"></span></p>
<p>入力した文字： <span id="jquery-api-blur-input-contents"></span></p>
textarea 要素での実装例（サンプル）
入力した文字：
textarea 要素での実装例（サンプル）の動作について
textarea 要素にテキストを入力しフォーカスを外すと、入力したテキストを「入力した文字： 」の右側に表示する。
textarea 要素での実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-blur-textarea' ) . blur( function () {
var str = jQuery( this ) . val();
jQuery( '#jquery-api-blur-textarea-contents' ) . text( str );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-blur-textarea' ) . blur( function () {
var str = jQuery( this ) . val();
jQuery( '#jquery-api-blur-textarea-contents' ) . text( str );
} );
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-api-blur-textarea {
margin: 0;
width: 500px;
}
-->
</style>
<!--
#jquery-api-blur-textarea {
margin: 0;
width: 500px;
}
-->
</style>
HTML
<p><textarea id="jquery-api-blur-textarea" name="jquery-api-blur-textarea"></textarea></p>
<p>入力した文字： <span id="jquery-api-blur-textarea-contents"></span></p>
<p>入力した文字： <span id="jquery-api-blur-textarea-contents"></span></p>