html 요소의 탭 순서가 페이지 새로 고침과 관계없이 항상 동일하게 작동하는지 또는 페이지로 이동했는지 어떻게 확인할 수 있습니까?

내가하고있는 프로젝트는 AngularJS를 사용하고 UI-Router 플러그인을 사용하여 모든 상태/페이지 변경 사항을 관리합니다.html 요소의 탭 순서가 페이지 새로 고침과 관계없이 항상 동일하게 작동하는지 또는 페이지로 이동했는지 어떻게 확인할 수 있습니까?

앱의 홈페이지에서 버튼을 클릭하여 특정 페이지로 이동하면 해당 페이지의 탭 순서가 바닥 글에서 시작됩니다. 그러나 동일한 페이지를 새로 고치면 탭 순서가 페이지 상단에서 올바르게 시작됩니다. 나는 홈페이지에서 버튼을 통해 페이지를 방문하고 탭으로 시작하기 전에 페이지 상단을 클릭하면 탭 순서가 올바르게 작동한다는 것을 알았습니다.

주 탐색 모음의 링크에 tabIndex = "0"을 추가하려고했지만 아무런 차이가 없었습니다. 내가 말했듯이, 페이지의 탭 순서는 페이지를 새로 고칠 때 완벽하게 작동합니다. 사이트의 다른 부분에서 페이지를 탐색 할 때만 엉망입니다.

페이지를 새로 고치거나 사이트의 다른 페이지에서 페이지를 탐색해도 탭 순서가 똑같이 작동하는지 확인하는 방법이 있습니까?

출처

2016-06-28 user2407334

샘플 URL이 있습니까? 어쩌면 앱의 홈 페이지에있는 버튼이 앵커 (아마도 '# footer'또는 유사)에 대한 링크일까요? 어느 쪽이든,'tabindex'는 여러분이 성취하고자하는 것을하지 않을 것입니다. 단순히 요소를 포커스 가능하게 만듭니다. – aardrian

더 많은 컨텍스트가 필요합니다. 예제 코드를 게시하십시오. –

상태 변경시 또는 컨트롤러가 초기화되고 DOM이 렌더링 된 후 기준에 맞는 첫 번째 컨트롤에 포커스를 설정합니다.

함유보기 :

<body ng-app="myApp"> 
    <div id="tabContent" ui-view></div> 
    </body>

자바 스크립트 :

var rootElementName='tabContent'; 
$timeout(function() { 
       var formElements = $('#' + rootElementId) 
            .find('select[disabled!="disabled"],input[disabled!="disabled"],textarea[disabled!="disabled"]'); 
       if(formElements && formElements.length > 0) { 
        formElements[0].focus(); 
        return true; 
        } else { 
        return false; 
        } 
      }, 0);

당신은 서비스 나 지시어에서이 작업을 수행 할 수 있습니다 *. 또는 onEnter 또는 $ viewContentLoaded 이벤트에 연결할 수 있습니다.

페이지의 특정 부분에 컨트롤을 지정할 수 있도록이 id를 포함 시켰습니다.이 예제에서는 비활성화되지 않은 첫 번째 select, input 또는 textarea 컨트롤에 포커스를 둡니다.

출처

2016-06-28 18:49:37

정말 고마워요! – user2407334

html 요소의 탭 순서가 페이지 새로 고침과 관계없이 항상 동일하게 작동하는지 또는 페이지로 이동했는지 어떻게 확인할 수 있습니까?

답변

관련 문제