使用Tab鍵導航滑動窗體除了鼠標點擊

Question

我越來越頭痛！我一直在研究這個代碼幾個小時，而我不知道爲什麼它不起作用。我有一個表格被分解成幾部分，當一個部分完成時，用戶可以點擊導航欄中的下一個選項卡前進到表單的下一部分。接下來的部分會滑入，用戶可以繼續使用該表單。當使用鼠標點擊作爲函數的動作時，這很好，但是，如果用戶使用「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(); 
}); 

現在，當我試圖使它的「Tab」鍵我用這個代碼（和\或該代碼的變化）工作，但似乎沒有任何工作：

$('#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。

請注意，您已完全禁用換檔標籤，我建議您在另一個綁定中添加以確定您要進入哪個方向。實際上，實現此目的有一種更簡單的方法，可以綁定到更多位置，侵入性較小。我不推薦這裏，因爲我不知道你的表格的範圍。讓我知道你是否感興趣！

希望這會有所幫助，如果我犯了任何錯誤或遺漏了某些內容，只需發表評論。