Question

我正在开发的项目是使用AngularJS并使用UI-Router插件来管理所有状态/页面更改。

当我通过单击应用程序主页上的按钮进入某个页面时，该页面的Tab键顺序从页脚开始。但是，当我刷新同一页面时，选项卡顺序正确地从页面顶部开始。我注意到当我通过主页上的按钮进入页面，并在开始选项卡之前单击页面顶部时，选项卡顺序表现正常。

我确实尝试添加tabIndex =＆＃34; 0＆＃34;到主导航栏中的链接，但是没有任何区别。就像我说的那样，当我刷新页面时，页面的标签顺序完全正常。当我从网站的其他部分导航到页面时，它只是搞砸了。

有没有办法确保Tab键顺序的行为完全相同，无论我刷新页面，还是从网站的其他页面导航到页面？

Answer 1

在状态更改或初始化控制器时以及在渲染DOM之后，将焦点设置为符合条件的第一个控件。

包含视图：

  <body ng-app="myApp">
    <div id="tabContent" ui-view></div>
  </body>

使用Javascript：

var rootElementName='tabContent';
$timeout(function () {
                var formElements = $('#' + rootElementId)
                                     .find('select[disabled!="disabled"],input[disabled!="disabled"],textarea[disabled!="disabled"]');
                if(formElements && formElements.length > 0) {
                    formElements[0].focus();
                    return true;
                    } else {
                    return false;
                    }
            }, 0);

*您可以在服务或指令中执行此操作。或者你可以将它绑定到onEnter或$ viewContentLoaded事件。

我包含了id，因此您可以定位页面特定部分的控件，此示例将聚焦未禁用的第一个select，input或textarea控件。

无论页面刷新或导航到页面，我如何确保html元素的Tab键顺序总是相同？

1 个答案: