除了鼠标单击之外，还可以使用 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/

这里有几件事。我已经更改了您将事件绑定到的内容。由于某种原因，您已将其添加到导航中，因此它从未触发。我对此进行了一些更改，以便它绑定到每个字段集的最后一个输入（仅 - 不选择）。我还使用了 keydown 而不是 keypress。

请注意，您已经完全禁用了 Shift Tab 键，我建议添加另一个绑定来确定您要进入的方向。事实上，有一种更简单的方法可以实现此目的，该方法可以绑定到更多位置，但在其他方面的侵入性较小。我不在这里推荐这个，因为我不知道你的表格的范围。如果您有兴趣，请告诉我！

希望这对您有所帮助，如果我犯了任何错误或留下不清楚的内容，请发表评论。