将选项卡焦点赋予新加载的页面 angularJS

Question

I have a web page side navigation menu in the left and content pane in the right.In the content pane there is a text and a iframe.When going through nav menu with tab and enter any menu option relevant content will be loaded to the content pane.Even content loaded to the pane tab focus is on the navigation menu.

I need to give the tab focus to the text or to the iframe in the content pane whenever content is newly loaded.I tried with tabindex ..

<a href="" tabindex="1">test text for tab focus</a>
<div id="content-frame" class="fill center-content">   

    <div id="content-frame-loading" class="load-img"><img ng-src="{{loadingIconUrl}}" alt="{{$scope.loadingSpinnerAltText}}"></div>

    <iframe id="centerIframe" name="centerIframe" class="fill content-frame"  src="" orientable height="100%" width="100%" ng-style="{'height' : settings.iFrameHeight}" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" allowtransparency="true">
    </iframe>

</div>

Above is the code block of the content pane.

Answer 1

only setting tabindex will not solve the purpose. tabindex will add the dom node into the tabbing sequence and will be focused on clicking tab when its turn comes according to the sequence.

Here you are setting the tabindex but additionally you also want the content to get focused automatically, so you will have to write some script to achieve that.

So if your content is part of a component, you can manually focus the desired element on load of that component in any of the life cycle hooks.

that way, when you click the navigation menu option, your content's component gets loaded, its lifecycle hook gets executed where your script to focus the desired element gets executed and focus gets onto that element.