Question

我有一个菜单控件，它将最终输出呈现如下。此菜单基于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>

Answer 1

Tab是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，标签也会继续有效然后他们在页面上的顺序。

在菜单项中使用tab键

1 个答案: