0

以下のように最終出力をレンダリングするメニュー コントロールがあります。このメニューは JavaScript 関数に基づいて開かれます。タブ キーを使用してこの要素に移動し、Enter キーを押してからタブ キーを押して内部に入り、循環します。 options.問題は、最後の要素に到達した後、タブをもう一度押すと、ページの次の要素に移動するのではなく、最初のオプションが強調表示されることです.これを達成するために何ができるかについて誰か教えてください.

<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 のトリッキーなキーの 1 つです。

私が使用した/見た中で最も問題のない解決策は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 に答える