除了鼠标单击外，还可以使用Tab键导航滑动表单

Navigate sliding form with Tab Key in addition to mouse click

本文关键字：Tab 导航 表单 可以使 鼠标 单击      更新时间：2023-09-26

我头痛!我已经在这个代码上工作了几个小时了，我不知道为什么它不起作用。我有一个被分解成几个部分的表单，当一个部分完成后，用户可以单击导航栏中的下一个选项卡，以进入表单的下一个部分。下一部分滑进来，用户可以继续使用表单。当使用鼠标点击作为功能的操作时，这工作得很好，但是，如果用户使用"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/

你可以看到它是如何工作和不工作的

任何帮助都非常感谢!

http://jsfiddle.net/2Fbrt/

这里有几件事。我已经改变了你绑定事件的对象。由于某种原因，您将它添加到导航中，因此它从未触发。我已经改变了一点，所以它被绑定到每个字段集的最后一个输入(仅-不选择)。我也用keydown代替keypress。

请注意，您已经完全禁用了shift选项卡，我建议添加另一个绑定来确定您要进入的方向。事实上，有一种更简单的方法可以实现这一点，它可以绑定更多的地方，但在其他方面不那么具有侵入性。我不建议在这里这样做，因为我不知道你的表单的范围。如果你感兴趣，请告诉我!

希望这对你有帮助，如果我犯了任何错误或有什么不清楚的地方，请留下评论。

相关文章：