マウスをクリックするだけでなくタブキーでスライドフォームをナビゲートします

Question

私は頭痛を受けています！私はこのコードを今何時間も作業していますが、なぜ動作していないのか分かりません。フォームが分割され、1つの部分が完成すると、ナビゲーションバーの次のタブをクリックしてフォームの次の部分に進むことができます。次の部分が挿入され、ユーザーはフォームを続行できます。これは、関数のアクションとしてマウスのクリックを使用する場合はうまく動作しますが、ユーザーが「Tab」キーを使用して移動する場合、スライドフォームは正しく完全にはスライドしません。私は、フォームの前の部分の一部を、フォームの現在の部分とともに、まだ見えています。これは、マウスのクリックのために働く私がこれまで持っているコードです：

$('#navigation a').bind('click',function(e){ 
    var $this = $(this); 
    var prev = current; 
    $this.closest('ul').find('li').removeClass('selected'); 
    $this.parent().addClass('selected'); 
    /* 
    we store the position of the link 
    in the current variable 
    */ 
    current = $this.parent().index() + 1; 
    /* 
    animate/slide to the next or to the corresponding 
    fieldset. The order of the links in the navigation 
    is the order of the fieldsets. 
    Also, after sliding, we trigger the focus on the first 
    input element of the new fieldset 
    If we clicked on the last link (confirmation), then we validate 
    all the fieldsets, otherwise we validate the previous one 
    before the form slided 
    */ 
    $('#steps').stop().animate({ 
     marginLeft: '-' + widths[current-1] + 'px' 
    },500,function(){ 
     if(current == fieldsetCount) 
      validateSteps(); 
     else 
      validateStep(prev); 
     $('#formElem').children(':nth-child('+ parseInt(current) +')').find(':input:first').focus();  
    }); 
    e.preventDefault(); 
}); 

今、私はそれが私がこのコード（と\またはこのコードのバリエーション）を使用する「タブ」キーを動作させるためにしようとすると、しかし、何も動いていないようにみえ：

$('#navigation a').bind('keypress',function(e){ 
    var $this = $(this); 
    var prev = current; 
    $this.closest('ul').find('li').removeClass('selected'); 
    $this.parent().addClass('selected'); 
    /* 
    we store the position of the link 
    in the current variable 
    */ 
    current = $this.parent().index() + 1; 

    var $fieldset = $(this); 
    $fieldset.children(':last').find(':input').keypress(function(e){ 
     if (e.keyCode == 9){ 
      $('#steps').stop().animate({ 
     marginLeft: '-' + widths[current-1] + 'px' 
    },500,function(){ 
     if(current == fieldsetCount) 
      validateSteps(); 
     else 
      validateStep(prev); 
     $('#formElem').children(':nth-child('+ parseInt(current) +')').find(':input:first').focus();  
    }); 
      e.preventDefault(); 
     } 
    }); 
}); 

あなたはそれが動作してJSFiddleでオーバー働いていないかを確認することができます：http://jsfiddle.net/GTmwU/13/

すべてのヘルプは大歓迎です！ここ

Answer 1

http://jsfiddle.net/2Fbrt/

物事のカップル。私はイベントをバインドしているものを変更しました。何らかの理由でナビゲーションに追加したので、決して解雇されませんでした。私はそれを少し変更したので、各フィールドセットの最後の入力（唯一 - 選択ではない）にバインドされています。 keypressの代わりに​​も使用しました。

あなたがシフトタブを完全に無効にしていることに注意してください。あなたが進んでいる方向を把握するために別のバインディングを追加することをお勧めします。実際に、これを達成するためのより簡単な方法があります。邪魔にならない。私はあなたのフォームの範囲を知らないので、ここではこれを推奨していません。あなたが興味があれば教えてください！

私は何かエラーがあった場合、または不明な点が残っている場合は、これが役に立ちます。