在菜單項中使用tab鍵

我有一個菜單控件，它呈現如下的最終輸出。此菜單是基於javascript函數打開的。使用tab鍵我可以到達此元素，然後按enter鍵，然後按tab鍵進入內部，然後遍歷選項。問題是，在到達end元素後再次按下tab鍵使第一個選項突出顯示，而不是轉到頁面的下一個元素。有人請指導我介紹一下我可以做些什麼做到這一點。在菜單項中使用tab鍵

<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>

來源

2012-12-13 user505210

標籤是HTML中那些棘手的鍵之一，是一個痛苦的工作。

我已經使用/看到的最有問題解決方案是從文檔中檢索所有input/a/button標籤。將它們存儲在一個數組中，當用戶按下Tab按鈕時捕獲該事件，然後將焦點集中到數組中的相應元素。

下面是一些粗糙的代碼：

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，那麼他們在頁面上的順序。

來源

2012-12-13 22:54:10 Ryan

在菜單項中使用tab鍵

回答

相關問題