将标签焦点赋予新加载的页面 angularJS答案

【问题标题】：Give tab focus to newly loaded page angularJS将标签焦点赋予新加载的页面 angularJS
【发布时间】：2020-03-30 05:10:20
【问题描述】：

我在左侧有一个网页侧导航菜单，在右侧有一个内容窗格。在内容窗格中有一个文本和一个 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>

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

【问题讨论】：

标签： javascript html angularjs focus tabindex

【解决方案1】：

只设置tabindex 并不能解决问题。 tabindex 会将 dom 节点添加到 tabbing 序列中，并在根据序列轮到它时将焦点点击 tab。

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

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

这样，当您单击导航菜单选项时，您的内容组件将被加载，其生命周期挂钩将在您的脚本聚焦所需元素的位置执行，并将焦点移至该元素。

【讨论】：