一覧の最後のテキストボックスのタブ移動先を先頭のテキストボックスに戻す

「検索画面と組み合わせてiframe内に検索結果を出す一覧形式の編集画面」とかの場合です。
特に何も制御していないと、最後のテキストボックスでTabキーを押すとフォーカスが明後日の方向に吹っ飛んで行ったりします。

で、設計者の要望でフレーム内だけでタブ移動を制限することになりましてー

---

まぁ タブ移動時のフォーカスを制御してやればいいので、以下の制御をすることになりました。

1. 最後のテキストボックスでTabキーが押されたら先頭のテキストボックスにフォーカス移動
2. 最初のテキストボックスでShift+Tabキーが押されたら最後のテキストボックスにフォーカス移動

サンプル

制御には無難にjQuery使っています。

$(function() {
    $('input:text:first').keydown(function(event){
        if (event.keyCode == 9 && event.shiftKey) {
            $('input:text:last').focus();
            return false;
        }
    });
    $('input:text:last').keydown(function(event){
        if (event.keyCode == 9 && !event.shiftKey) {
            $('input:text:first').focus();
            return false;
        }
    });
});

---

タブ移動先がテキストボックスしか無い前提です。

以上!