마우스를 클릭하는 것 외에도 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(); 
}); 

:이 마우스 클릭 작동 내가 지금까지 가지고있는 코드입니다 하지만 아무것도 작동하는 것 같다 없습니다 :

$('#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 대신 keydown을 사용했습니다.

Shift 키를 완전히 사용하지 않도록 설정 했으므로 이동 방향을 결정하기 위해 다른 바인딩을 추가하는 것이 좋습니다. 실제로 더 많은 장소에 바인딩하는 다른 방법이 있습니다 덜 관입하는. 나는 당신의 형식의 범위를 알지 못하기 때문에 이것을 여기 추천하지 않습니다. 관심이 있다면 알려주세요!

오류가 발생했거나 명확하지 않은 부분이 있으면 도움이 되시길 바랍니다.