Блог

У меня болит голова! Я работаю над этим кодом уже несколько часов и понятия не имею, почему он не работает. У меня есть форма, которая разбита на части, и когда одна часть завершена, пользователь может нажать на следующую вкладку на панели навигации, чтобы перейти к следующей части формы. Следующая часть скользит, и пользователь может продолжить работу с формой. Это отлично работает при использовании щелчка мыши в качестве действия функции, однако, если пользователь использует клавишу «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 .

Имейте в виду, что вы полностью отключили сдвиг табуляции, я бы рекомендовал добавить другую привязку, чтобы выяснить, в каком направлении вы движетесь. На самом деле, есть более простой способ добиться этого, который привязывается к большему количеству мест, но в остальном менее навязчив. Я не рекомендую это здесь, поскольку я не знаю области действия вашей формы. Дайте мне знать, если вам интересно!

Надеюсь, это поможет, и просто оставьте комментарий, если я допустил какие-либо ошибки или оставил что-то неясное.