2011-07-28 14 views
2

複数のdivにまたがるHTMLフォームがあります。私は各div内の最初または最後の要素にあるときにユーザーがタブキーを押したときを知る必要があります(カスタムタブ機能をいくつか適用できます)。 divの最初の要素については、Tab + Shiftを探しています。最後の要素のために私はTabのみを探しています。要素には、テキストボックス、テキストエリア、ラジオボタン、選択リスト、またはチェックボックスを使用できます。最初のフォーム要素または最後のフォーム要素のタブを押したときの検出

最初と最後の要素を検出する最も効率的な方法は何ですか? jQueryソリューションを使用して幸いです。

ありがとうございました。

+0

は、なぜあなたは 'tabindex属性を使用していません'属性の代わりにJS? –

答えて

0

入力が真にDIVの最初と最後の子である限り、以下が動作します。それ以外の場合は、選択を少し難しくする必要があります。

編集:子オーダーに関する私の主張は間違っているようです。これはほとんどの状況で有効です。 終了編集

特定の種類の入力、または入力と見なされますが実際にはinput要素ではないものにするには、セレクタに若干の調整が必要です。あなたが最初と最後の要素のタブラップを持つようにしたいよう

デモ

http://jsfiddle.net/JAAulde/tHkdz/

コード

$('#myform') 
    .find('div input:first-child, div input:last-child') 
    .bind('keydown', function(e) 
    { 
     if(e.which === 9) 
     { 
      //custom code here 
      e.preventDefault(); 
     } 
    }); 
+0

すごく感謝します。 – Journeyman

+0

最初の入力と最後の入力の両方に同じイベントハンドラを使いたいですか?最初の入力でSHIFT + TABだけを処理し、TABキーでデフォルトの動作を引き継ぐように思えます。 – FishBasketGordo

0

あなたは最初と最後の子セレクタを使用することができます。

var first = $("#form-name:first-child"); 
var last = $("#form-name:last-child"); 
2

フォーム要素を見つけるために、:first-child:last-childセレクタを使用することができます。次に、​​イベントハンドラを付けて、それぞれSHIFT + TABとTABを確認することができます。

$('div input:first-child').keydown(function(event) { 
    if (event.which == 9 && event.shiftKey) { // Tab is keycode 9 
     // Do custom tab handling 
    } 
}); 

$('div input:last-child').keydown(function(event) { 
    if (event.which == 9) { 
     // Do custom tab handling 
    } 
}); 
+0

これらは動作しません。彼らはすべての部門内のすべてのインプットを見つけ、総コレクションの最初のものまたは総コレクションの最後のもののみを返します。各部門の最初と最後ではありません。 – JAAulde

+0

あなたが正しい。私は誤植を訂正しました。 – FishBasketGordo

0

が鳴ります。

  • ゲット最初:$('#form').find('input, textarea, select').first();
  • 最後ゲット:要素へ$('#form').find('input, textarea, select').first();
  • バインドKeyDownイベント:jQuery Event Keypress: Which key was pressed?
  • をその後に焦点を当てる:キーが押された、これが決定する.keydown()
    • 使用をあなたが望む要素:.focus()

編集:セレクタ論理は間違っていた

例えば

:あなたがやろうとしているすべて正しい入力に戻る/進むフォーカスを移動している場合http://jsfiddle.net/rkw79/fuXyf/

関連する問題