focus( fn )

jQuery API の focus( fn ) は、フォーカスイベントにイベントハンドラをバインドしたいときに便利なメソッドだ。

要素をフォーカスしたときに、focus( fn ) の引数に指定したイベントハンドラを呼び出すことができる。

記述方法

jQuery( セレクター ) . focus( イベンドハンドラ );

「セレクター」の要素のフォーカスイベントに、「イベンドハンドラ」をバインド。

input 要素での実装例(サンプル)

入力した文字:

input 要素での実装例(サンプル)の動作について

input 要素のテキスト入力欄にフォーカスすると、テキスト入力欄の背景色をベージュ色にハイライトし、テキスト入力欄の右側に「入力中」と表示する。input 要素にテキストを入力しフォーカスを外すと、入力したテキストを「入力した文字: 」の右側に表示する。

input 要素での実装例(サンプル)のソースコード

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-api-focus-input' ) . focus( function () {
        var str = ' 入力中';
        jQuery( '#jquery-api-focus-input-contents' ) . text( str );
        jQuery( '#jquery-api-focus-input' ) . css( 'backgroundColor', '#f5f5dc' );
    } );
    jQuery( '#jquery-api-focus-input' ) . blur( function () {
        var str = jQuery( this ) . val();
        jQuery( '#jquery-api-blur-input-contents' ) . text( str );
        jQuery( '#jquery-api-focus-input' ) . css( 'backgroundColor', '#ffffff' );
        jQuery( '#jquery-api-focus-input-contents' ) . text( '' );
    } );
} );
// -->
</script>

CSS

<style type="text/css">
<!--
#jquery-api-focus-input {
    margin: 0;
}
-->
</style>

HTML

<p><input type="text" id="jquery-api-focus-input" name="jquery-api-focus-input"><span id="jquery-api-focus-input-contents"></span></p>
<p>入力した文字: <span id="jquery-api-blur-input-contents"></span></p>

textarea 要素での実装例(サンプル)

入力した文字:

textarea 要素での実装例(サンプル)の動作について

textarea 要素のテキスト入力欄にフォーカスすると、テキスト入力欄の背景色をベージュ色にハイライトし、テキスト入力欄の右側に「入力中」と表示する。textarea 要素にテキストを入力しフォーカスを外すと、入力したテキストを「入力した文字: 」の右側に表示する。

textarea 要素での実装例(サンプル)のソースコード

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-api-focus-textarea' ) . focus( function () {
        var str = ' 入力中';
        jQuery( '#jquery-api-focus-textarea-contents' ) . text( str );
        jQuery( '#jquery-api-focus-textarea' ) . css( 'backgroundColor', '#f5f5dc' );
    } );
    jQuery( '#jquery-api-focus-textarea' ) . blur( function () {
        var str = jQuery( this ) . val();
        jQuery( '#jquery-api-blur-textarea-contents' ) . text( str );
        jQuery( '#jquery-api-focus-textarea' ) . css( 'backgroundColor', '#ffffff' );
        jQuery( '#jquery-api-focus-textarea-contents' ) . text( '' );
    } );
} );
// -->
</script>

CSS

<style type="text/css">
<!--
#jquery-api-focus-textarea {
    margin: 0;
    width: 500px;
}
-->
</style>

HTML

<p><textarea id="jquery-api-focus-textarea" name="jquery-api-focus-textarea"></textarea><span id="jquery-api-focus-textarea-contents"></span></p>
<p>入力した文字: <span id="jquery-api-blur-textarea-contents"></span></p>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, イベント, フォーム, フォーム・イベント パーマリンク