메뉴 항목 내에서 탭 키 사용

Question

다음과 같이 최종 출력을 렌더링하는 메뉴 컨트롤이 있습니다.이 메뉴는 자바 스크립트 기능을 기반으로 열립니다. 탭 키를 사용하여이 요소로 이동 한 다음 Enter 키를 누른 다음 Enter 키를 누릅니다. 탭 키를 안으로 이동하고 옵션을 통해 사이클. 그 문제는 탭을 다시 누르면 첫 번째 옵션은 페이지의 다음 요소로 이동하는 대신 강조 표시하는 최종 요소에 도달 후 누군가가 나를 안내 할 수 있습니다. 이것을 달성하십시오.

<menu id="zz4_FeatureMenuTemplate1" largeiconmode="true"> 
     <ie:menuitem id="zz5_MenuItem_CreateDocLib" menugroupid="200" description="Create a place to store and share documents." text="New Document Library" onmenuclick="if (LaunchCreateHandler('DocLib')) { GoToPage('\u002fview\u002f_layouts/new.aspx?FeatureId={00bfea71-e717-4e80-aa17-d0c71b360101}&amp;ListTemplate=101') }" iconsrc="/_layouts/images/NewDocLibHH.png" type="option"></ie:menuitem> 
     <ie:menuitem id="zz6_MenuItem_CreateSite" menugroupid="200" description="Create a site for a team or project." text="New Site" onmenuclick="if (LaunchCreateHandler('Site')) { STSNavigate('\u002fview\u002f_layouts/newsbweb.aspx') }" iconsrc="/_layouts/images/newweb32.png" type="option"></ie:menuitem> 
     <ie:menuitem id="zz7_MenuItem_Create" menugroupid="200" description="Create other types of pages, lists, libraries, and sites." text="More Options..." onmenuclick="if (LaunchCreateHandler('All')) { STSNavigate('\u002fview\u002f_layouts/create.aspx') }" type="option"></ie:menuitem> 

     <ie:menuitem id="zz8_MenuItem_ViewAllSiteContents" menugroupid="300" description="View all libraries and lists in this site." text="View All Site Content" onmenuclick="STSNavigate2(event,'/view/_layouts/viewlsts.aspx');" iconsrc="/_layouts/images/allcontent32.png" type="option"></ie:menuitem> 
     <ie:menuitem id="zz9_MenuItem_SitePermissions" menugroupid="300" description="Give people access to this site." text="Site Permissions" onmenuclick="STSNavigate2(event,'/view/_layouts/user.aspx');" iconsrc="/_layouts/images/Permissions32.png" type="option"></ie:menuitem> 
     <ie:menuitem id="zz10_MenuItem_Settings" menugroupid="300" description="Access all settings for this site." text="Site Settings" onmenuclick="STSNavigate2(event,'/view/_layouts/settings.aspx');" iconsrc="/_layouts/images/settingsIcon.png" type="option"></ie:menuitem> 
    </menu> 

Answer 1

탭은 작업 할 고통 인 html의 까다로운 키 중 하나입니다.

내가 보았던 가장 문제가되는 해결책은 문서에서 모든 input/a/button 태그를 검색하는 것이 었습니다. 배열에 저장하고 사용자가 탭 버튼을 누르면 해당 이벤트를 캡처 한 다음 배열의 해당 요소에 포커스를 둡니다.

var elements_array = document.getElementsByTagName("*"); 
for(var i = elements_array.length; i--){ 
    if(elements_array[i].indexOf("input") < 0 || elements_array[i].indexOf("a") < 0 || elements_array[i].indexOf("button") < 0){ 
     elements_array[i].pop(); 
    } 
} 

function tab_key(e){ 
    if(e.keyCode == 9){ 
     var curr_focus = find_current_focus; 
     for(var = elements_array.length; i--){ 
      if(elements_array[i] == curr_focus){ 
       var new_focus = elements_array[i+1]; 
       new_focus.focus(); 
       break; 
      }   
     } 
    } 
} 

function find_current_focus(){ 
    return document.activeElement; 
} 

활성 요소를 반환하는 함수를 사용하는 대신 단지 배열의 다음 단계로 현재 포커스를 설정하는 이유는, 그래서 탭을 계속 사용할 수 있습니다 : 여기

약간 거친 코드입니다 사용자가 다른 input/a/button을 클릭하더라도 페이지에있는 순서대로 표시됩니다.