Tab 키를 눌렀을 때 커서가 다음 단추로 이동하지 않습니다.

Question

3 페이지가있는 양식이 있습니다. 첫 번째 페이지가 가득 차면 사용자는 '다음'버튼을 클릭하여 다음 페이지로 이동합니다.

의도 : 사용자가 탭 키를 누르면 경우, 메시지가 표시되고 커서가 '다음'버튼에 남아 있습니다.

문제 : 나는 탭을 누르면 키 메시지가 표시되고 커서가 '다음'버튼에 남아 있습니다. 그러나, 두 번째로 탭 키를 누르면 커서가 다음 페이지로 이동합니다.

<div class="next"><a class="next-button" href="#second">Next</a></div> 

$('.next-button').on("keyup", function(event) { 
if (event.which == 9) { 
    alert('Click Next button to go to the next Page'); 
    return false; 
} 
}); 

Answer 1

내가 보는 당신의 예에서 탭 키 커서를 누르면 두 번째는 당신의 '두 번째 페이지'의 첫 번째 필드에 떨어질 때 :

여기 내 코드입니다. 어쩌면 이것에 접근하는 더 효율적인 방법이있을 수 있습니다 만, 이것에 대해서는 어떨까요?

$('.next-button').on("keydown", function(event) { 
    if (event.which == 9) {  
     alert('Click Next button to go to the next Page'); 
     this.focus();    
     return false; 

    } 
}); 

다음 단추에서 포커스를 다시 설정해야합니다. 내 JSFiddle은 물론, 페이지의 실제 기능을 반영하지 않습니다, 그러나 이것은 당신에게 그것이 어떻게 작동하는지에 대한 아이디어 줄 수도 : 두 번째 페이지가 여전히 초점을 맞추고 후에도 표시되는 경우

http://jsfiddle.net/BBWxz/1/

을 다음 버튼을 누르면 위의 코드에이를 추가 할 수 있으므로 두 번째 페이지가 전혀 표시되지 않습니다. 그래서 기본적으로

$('.second-page').hide(); 

, 코드는 다음과 같습니다

$('.next-button').on("keydown", function(event) { 
    if (event.which == 9) {  
     alert('Click Next button to go to the next Page'); 
     this.focus(); 
     $('.second-page').hide(); 
     return false; 

    } 
}); 

미봉책을? 네,하지만이게 네가 원하는대로 할거야.