Javascript 在ng视图中加载新路由时，制表符（tabindex）指向错误的元素

我在Angular（1.4.8）中有一个SPA，使用Angular route（1.4.8）和Angular材质（以防有任何区别）

每当用户单击链接并被重定向到新路由时，下一个选项卡位置应该是ng视图中带有

tabindex=“1”

（或0，-1）的元素。相反，当加载新路由时，下一个选项卡位置是应用程序的徽标和标题菜单[显示在ng视图外]

这就造成了非常糟糕的可用性，用户在改变路线时，必须跳转5个链接，以达到所需的主要元素。这在我们的应用程序中尤其糟糕，因为我们有一个跨越多个路由/视图的表单向导

我认为这可能是最近开始的，可能是在从早期版本升级到1.4.8之后。有人对此有经验和/或对如何解决此问题有建议吗

---

每当ng view呈现新路由时，活动选项卡索引位置应恢复为0。

我的解决方案是将默认焦点设置在表单中所需的元素上。

---

你可以试试这个

我在这篇关于ARIA和AngularJS的文章中找到了一个解决方案，我最终实现了它：

我们使用角度材质，因此每个视图都有一个我们可以瞄准的md内容元素（但您可以瞄准任何元素）。当用户单击tab时，下一个tabindex位置将是视图中具有

tabindex=“1”

的元素

---

这里的好处是，我们不选择第一个表单字段，因此移动设备键盘不会立即出现（这将导致用户甚至在看到页面内容之前就覆盖移动设备屏幕的一半）。

如果您担心的是AODA，那么这可能符合min要求（一开始没有明确定义）因为你仍然可以接触到新元素。您可以尝试手动关注元素，但如果不在操作中看到这一点，就很难说问题出在哪里。为什么不创建tab index指令来添加适当的属性并从徽标中删除tabindex等？有一个“md自动对焦”的角度材料，但这意味着键盘打开移动设备上的一分钟页面加载，我认为这是不可取的。我最终使用了

$viewContentLoaded

方法。哦，我认为“md自动对焦”只能用于表单字段和按钮，所以我最终使用了自己的解决方案。

app.run(function setupRouteChangeHandlers ($rootScope) {
  var bodyElement;

  $rootScope.$on('$viewContentLoaded', setupTabIndexFocus);

  ////////////

  function setupTabIndexFocus () {
    if (!bodyElement) bodyElement = $('body');
    bodyElement.find('md-content').attr('tabIndex', -1).focus();
  }
});