0

我有一个菜单控件，它呈现如下的最终输出。这个菜单是基于 javascript 函数打开的。使用 tab 键我可以进入这个元素，然后按 enter，然后按 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>
4

1 回答 1

0

Tab 是 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他们在页。

于 2012-12-13T22:54:10.607 回答