HTML5 の autofocus 属性を拡張する jQuery exAutofocus

更新履歴

2010-11-25: jQuery Alert Dialogs との併用例を追記しました。

HTML5 のサポートブラウザで実装されてる autofocus 属性をクロスブラウザで使用できるようにする jQuery プラグインです。適用したい要素に autofocus 属性を記述した状態で JS ファイルを読み込むと、画面表示時に自動的に autofocus 属性を持つフィールドにフォーカスがあたるようになります。

ただ autofocus の標準機能だけだとあまり実用性がないので、「入力エラーがあった場合はそちらのフィールドへのフォーカスを優先する」といったちょっとした拡張を、オプションで使用できるようにしてあります。

機能概要

クロスブラウザで HTML5 の autofocus 属性を機能させることができるようになります。また、拡張機能を有効にすると以下の優先順位でフォーカス先の要素が決まるようになります。

エラークラスを持つ入力フィールドがあった場合は、そちらへフォーカス
autofocus 属性を持つ入力フィールドがあった場合は、そちらへフォーカス
上記に該当する要素が無かった場合は、先頭の入力フィールドへフォーカス

標準の autofocus 機能の使い方

jquery.js、jquery.exautofocus.js を読み込みます。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.exautofocus.js"></script>

フォーカスを当てたい要素に autofocus 属性を記述しておきます。

<input name="sample" autofocus/>

Demo

拡張機能の使い方

以下のようにプラグインファイルの読み込みで、exAutofocus パラメータを指定すると拡張機能が有効になります。

<script src="jquery.exautofocus.js?exAutofocus=true"></script>

Demo（autofocus 指定なし）

Demo（autofocus 指定あり）

autofocus 属性を持つ入力フィールドが存在しない場合は、先頭の入力フィールドへフォーカスします。また、デモでは値を入力せずに送信ボタンを押すと、該当フィールドに "error" という名前のクラスを付与し再描画するようにしてあり、拡張機能有効時は、この "error" クラスを持つ要素を優先しフォーカスするようになります。

エラークラス名の変更

エラークラス名を変更したい場合は、以下のように errorClass パラメータを指定します。

<script src="jquery.exautofocus.js?exAutofocus=true&errorClass=requiredErr"></script>

プラグイン読み込み時の実行を抑止

プラグイン読み込み時の実行を抑止したい場合は、autorun パラメータを指定します。

<script src="jquery.exautofocus.js?autorun=false"></script>

以下記述で、任意のタイミングでプラグインを実行することができます。

$.ex.autofocus({
    exAutofocus : true,
    errorClass : 'data-err'
});

jQuery Alert Dialogs Plugin を併用してみる

入力項目が多く１画面収まらないような場合は、いきなりエラー項目にフォーカスさせず Alert Dialogs Plugin でメッセージを表示させた後フォーカスさせてみます。

jQuery(function($){
	//この時点で先頭フィールド又はエラーフィールドへフォーカスしてる
	var errCnt = $('.error').size();
	if (errCnt) {
		jAlert(errCnt +' 件の入力エラーがあります', 'Error !',function(){
			//再度エラーフィールドへフォーカスさせる
			$.ex.autofocus({
				exAutofocus : true
			});
		});
	}
});