focus()

jQuery API の focus() は、フォーカスイベントを実行するメソッド。フォーカスイベント時の、ブラウザのデフォルト動作と、focus( fn )などでバインドしたイベントハンドラを実行する。

「A要素のイベント時に、B要素のフォーカスイベントを実行させたい」なんて時に便利だ。

記述方法

jQuery( セレクター ) . focus();

「セレクター」の要素のフォーカスイベントを実行する。

実装例(サンプル)

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

「focus()」ボタンをクリックすると、テキスト入力欄をフォーカスし、入力欄の背景色をベージュ色にする。

「blur()」ボタンをクリックすると、テキスト入力欄からフォーカスを外し、入力欄の背景色を白色に戻す。

実装例(サンプル)のソースコード

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-api-click-focus' ) . click( function () {
        jQuery( '#jquery-api-input' ) . focus();
    } );
    jQuery( '#jquery-api-click-blur' ) . click( function () {
        jQuery( '#jquery-api-input' ) . blur();
    } );
    jQuery( '#jquery-api-input' ) . focus( function () {
        jQuery( '#jquery-api-input' ) . css( 'backgroundColor', 'beige' );
    } );
    jQuery( '#jquery-api-input' ) . blur( function () {
        jQuery( '#jquery-api-input' ) . css( 'backgroundColor', 'white' );
    } );
} );
// -->
</script>

CSS

<style>
<!--
#jquery-api-input {
    margin: 0px;
    background-color: white;
}
-->
</style>

HTML

<p>
    <button id="jquery-api-click-focus">focus()</button>
    <button id="jquery-api-click-button">blur()</button>
</p>
<p>
    <input type="text" id="jquery-api-input">
</p>

スポンサード リンク

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