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

Question

我在左侧有一个网页侧导航菜单，在右侧有一个内容窗格。在内容窗格中有一个文本和一个 iframe。当使用选项卡浏览导航菜单并输入任何菜单选项时，相关内容将被加载到内容中窗格。即使加载到窗格选项卡焦点的内容也位于导航菜单上。

每当新加载内容时，我都需要将选项卡焦点放在文本或内容窗格中的 iframe 上。我尝试使用 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>

以上是内容窗格的代码块。

Answer 1

仅设置 tabindex 并不能解决问题。 tabindex 会将 dom 节点添加到 tabbing 序列中，并在轮到按顺序时专注于单击 tab 。

在这里，您正在设置 tabindex，但另外您还希望内容自动获得焦点，因此您必须编写一些脚本来实现这一点。

因此，如果您的内容是组件的一部分，您可以在任何生命周期挂钩中手动将所需元素集中在该组件的加载上。

这样，当您单击导航菜单选项时，您的内容组件将被加载，它的生命周期钩子将被执行，您的脚本将聚焦所需元素并在该元素上获得焦点。