jQuery API の jQuery( ':focus' ) は、現在フォーカスされている要素を選択する。
記述方法
jQuery( ':focus' )
現在フォーカスされている要素を選択する。
記述例
jQuery( 'form :focus' )
form 要素内の要素で、現在フォーカスされている要素を選択する。
実装例（サンプル）
実装例（サンプル）の動作について
フォーム内の要素のうち、フォーカスした要素の背景色が、黄色に変わる。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( 'form#jquery-api-form *:input' ) . bind( 'focus blur', function() {
var jqueryApiFormItem = jQuery( this );
setTimeout( function() {
jqueryApiFormItem . toggleClass( 'jquery-api-focused', jqueryApiFormItem . is( ':focus' ) );
}, 0 );
} );
jQuery( 'form#jquery-api-form' ) . submit( function () { return false; } );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( 'form#jquery-api-form *:input' ) . bind( 'focus blur', function() {
var jqueryApiFormItem = jQuery( this );
setTimeout( function() {
jqueryApiFormItem . toggleClass( 'jquery-api-focused', jqueryApiFormItem . is( ':focus' ) );
}, 0 );
} );
jQuery( 'form#jquery-api-form' ) . submit( function () { return false; } );
} );
// -->
</script>
CSS
<style>
<!--
#jquery-api-form {
margin: 5px;
padding: 5px;
border: 1px solid gray;
border-radius: 10px;
}
#jquery-api-form input,
#jquery-api-form select,
#jquery-api-form textarea,
#jquery-api-form button {
margin: 5px;
}
.jquery-api-focused {
background-color: yellow !important;
}
-->
</style>
<!--
#jquery-api-form {
margin: 5px;
padding: 5px;
border: 1px solid gray;
border-radius: 10px;
}
#jquery-api-form input,
#jquery-api-form select,
#jquery-api-form textarea,
#jquery-api-form button {
margin: 5px;
}
.jquery-api-focused {
background-color: yellow !important;
}
-->
</style>
HTML
<form id="jquery-api-form">
<p>
<input type="text" />
<input type="text" />
</p>
<p>
<textarea></textarea>
<textarea></textarea>
</p>
<p>
<select>
<option>オプション</option>
<option>オプション</option>
</select>
<select>
<option>オプション</option>
<option>オプション</option>
</select>
</p>
<p>
<input type="password" />
<input type="password" />
</p>
<p>
<input type="button" value="インプットボタン" />
<input type="button" value="インプットボタン" />
</p>
<p>
<input type="reset" />
<input type="reset" />
</p>
<p>
<input type="submit" />
<input type="submit" />
</p>
<p>
<button>ボタン</button>
<button>ボタン</button>
</p>
</form>
<p>
<input type="text" />
<input type="text" />
</p>
<p>
<textarea></textarea>
<textarea></textarea>
</p>
<p>
<select>
<option>オプション</option>
<option>オプション</option>
</select>
<select>
<option>オプション</option>
<option>オプション</option>
</select>
</p>
<p>
<input type="password" />
<input type="password" />
</p>
<p>
<input type="button" value="インプットボタン" />
<input type="button" value="インプットボタン" />
</p>
<p>
<input type="reset" />
<input type="reset" />
</p>
<p>
<input type="submit" />
<input type="submit" />
</p>
<p>
<button>ボタン</button>
<button>ボタン</button>
</p>
</form>