テーブルのセル間をフォーカス移動できるようにする jQuery exTable Focus
先日、現物とドキュメントの乖離に嫌気がさし、テーブル定義書の和名や説明文を、DBのメタ情報として保存できるようにする Web アプリを作りました。(オラクルのデータディクショナリを利用してます)
テーブル定義書イメージな画面から Ajax + In-Place-Editor で直接編集できるようにしたのですが、編集量が多い時など、キー操作による上下左右のフォーカス移動ができないとどうにも不便だったので、これを可能にする jQuery プラグインを書いてみました。
機能概要
テーブル要素内の INPUT、TEXTAREA、SELECT、A のいづれかの要素にフォーカスした状態で、[Shift] + 移動したい方向の[矢印キー]の入力で、セルを跨いだフォーカス移動ができます。
Opera の空間ナビゲーション機能
Opera にはもともと テーブル要素に限定せず、同様のキー操作でフォーカス移動を行える「空間ナビゲーション」という機能があります。
なので Opera の場合のみ、キー操作部分は、空間ナビゲーション機能で代替する実装になってます。
使い方
jquery.js、jquery.extablefocus.js を読み込みます。(jQuery の delegate メソッドを使用してるので、Ver 1.4.2 以降の jQuery を使用してください)
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.extablefocus.js"></script>
適用したいテーブル要素に対し、exTableFocus() メソッドを実行します。
jQuery(function($){ $('table.example').exTableFocus(); });
INPUT 要素のフォーカス移動
INPUT 要素にフォーカスした状態で、Shift + 矢印キーを入力するとフォーカス移動できます。上下移動のみなら Opera でなければ Shift 入力なしでも移動できます。
デモではフォーカスの当たってる行の背景色が変わるようになってますが、これはカレント行の TR 要素に ex-table-current-row というクラスが割り当たる仕様になってるためで、デモでは以下のような CSS を当ててます。
tr.ex-table-current-row td{ background:#ffdddd; }
1つのセル内に複数のフォーカス可能要素がある場合
移動方向に対し直近の要素からフォーカスしていきます。例えば右方向に移動し、移動先のセルにフォーカス可能要素が複数あった場合は、DOM 構成上、先に出現する要素を優先しフォーカスします。左に移動した場合はその逆で、DOM 構成上、後に出現する要素を優先してフォーカスします。
In-Place-Editor との併用例
デモでは、テーブル内の A 要素に対し、以下のようにexInPlace Editor(In-Place-Editor (その場で編集する UI) の jQuery プラグインを書いてみた - Cyokodog::Diary)を適用しています。
jQuery(function($){ $('table').exTableFocus().delegate('a','mouseover focus',function(){ $(this).exInPlaceEditor({ nowHover : true, saveLabel : false, cancelLabel : false, editorType : 'input' }); }); });
delegate() メソッド経由で、ホバーもしくはフォーカスした要素に対し動的にプラグインを適用してるので、サイズの大きいテーブル要素でも、初期化処理におけるパフォーマンス低下の心配がありません。
改行キー入力でフォーカス移動させる
プラグイン実行時に、以下のようにパラメータ指定すると、改行キー入力で次要素にフォーカスさせることができます。
$('table.example').exTableFocus({ overrideCrControl : true });
パラメータ
以下パラメータがあります。
- api
- 初期値 : false
true にすると API オブジェクトを返します。 - overrideCrControl
- 初期値 : false
true にすると verticalCrControl パラメータの設定が有効になります。 - verticalCrControl
- 初期値 : false
overrideCrControl パラメータが true の場合のみ有効になります。true にするとエンターキー入力時に垂直方向にフォーカス移動します。 - overrideTabControl
- 初期値 : false
true にすると verticalTabControl パラメータの設定が有効になります。 - verticalTabControl
- 初期値 : false
overrideTabControl パラメータが true の場合のみ有効になります。true にすると TAB キー入力時に垂直方向にフォーカス移動します。 - currentRowClass
- 初期値 : "ex-table-current-row"
フォーカスの当たった行(TR 要素)に振られるクラス名を指定できます。 - selectValue
- 初期値 : true
false にすると INPUT や TEXTAREA にフォーカス時、値を選択状態にしません。 - focusExpr
- 初期値 : "select,input,textarea,a"
フォーカス制御を適用する要素を指定できます。(Opera は不可)