テーブルのセル間をフォーカス移動できるようにする jQuery exTable Focus

先日、現物とドキュメントの乖離に嫌気がさし、テーブル定義書の和名や説明文を、ＤＢのメタ情報として保存できるようにする Web アプリを作りました。（オラクルのデータディクショナリを利用してます）

テーブル定義書イメージな画面から Ajax + In-Place-Editor で直接編集できるようにしたのですが、編集量が多い時など、キー操作による上下左右のフォーカス移動ができないとどうにも不便だったので、これを可能にする jQuery プラグインを書いてみました。

機能概要

テーブル要素内の INPUT、TEXTAREA、SELECT、A のいづれかの要素にフォーカスした状態で、[Shift] + 移動したい方向の[矢印キー]の入力で、セルを跨いだフォーカス移動ができます。

Opera の空間ナビゲーション機能

Opera にはもともとテーブル要素に限定せず、同様のキー操作でフォーカス移動を行える「空間ナビゲーション」という機能があります。

"Shift" + "矢印" キーで空間ナビゲーション - Choose 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 要素のフォーカス移動

Demo

INPUT 要素にフォーカスした状態で、Shift + 矢印キーを入力するとフォーカス移動できます。上下移動のみなら Opera でなければ Shift 入力なしでも移動できます。

デモではフォーカスの当たってる行の背景色が変わるようになってますが、これはカレント行の TR 要素に ex-table-current-row というクラスが割り当たる仕様になってるためで、デモでは以下のような CSS を当ててます。

tr.ex-table-current-row td{
	background:#ffdddd;
}

INPUT + TEXTAREA 要素のフォーカス移動

Demo

Shift + 矢印キーでフォーカス移動できます。

INPUT + SELECT 要素のフォーカス移動

Demo

Shift + 矢印キーでフォーカス移動できます。

A 要素のフォーカス移動

Demo

Opera 以外であれば矢印キーのみでもフォーカス移動できます。

１つのセル内に複数のフォーカス可能要素がある場合

Demo

移動方向に対し直近の要素からフォーカスしていきます。例えば右方向に移動し、移動先のセルにフォーカス可能要素が複数あった場合は、DOM 構成上、先に出現する要素を優先しフォーカスします。左に移動した場合はその逆で、DOM 構成上、後に出現する要素を優先してフォーカスします。

In-Place-Editor との併用例

Demo

デモでは、テーブル内の 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
});

Demo

改行キー入力で垂直方向にフォーカス移動させる

プラグイン実行時に、以下のようにパラメータ指定すると、改行キー入力で垂直方向にフォーカス移動させることができます。

$('table.example').exTableFocus({
	overrideCrControl : true,
	verticalCrControl : true
});

Demo

パラメータ

以下パラメータがあります。

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 は不可）