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 tabbing，我建议添加另一个绑定以确定您要进入的方向。事实上，有一种更简单的方法可以实现这一点，它可以绑定到更多的地方但是更少侵入。我不推荐这里，因为我不知道你的表格的范围。如果您有兴趣，请告诉我！

希望这有帮助，如果我犯了任何错误或遗漏了某些内容，就放弃评论。

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

1 个答案: