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>
<!--
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>
<!--
#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>
<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>