如何在 angular 6 中的整个应用程序中的每个页面上的第一个输入字段上设置焦点

Question

我的应用程序处于最后阶段，我们还没有在输入标签上实现自动对焦。 现在我们有一个要求，我们希望将焦点放在每个页面中的第一个输入标签上。 我的应用程序中有很多页面/表单，因此在每个组件中使用 ViewChild 可能是一项乏味的任务。 因此，我正在寻找一种可以在一个地方编写一些代码的方法，它会触发对加载任何页面的第一个输入的关注。 谁能建议一些方法来做到这一点？

Answer 1

您可以在您的应用程序组件中订阅路由器事件，即使是 navigationEnd 的实例也意味着发生路由更改，然后在您的应用程序组件构造函数中使用 jquery 获取页面上的第一个输入并聚焦

 router.events.subscribe((e) => {
      if(e instanceof NavigationEnd)
        {
         var ele= $('input[type=text],textarea').filter(':visible:first').focus();
        }
    });

工作演示

Answer 2

我想出了一个方法装饰器，它可以做你想做的事。 也就是说，如果您不介意将这个 function 导入所有页面。 然后，您只需将此装饰器附加到AfterViewInit生命周期，如下所示：

@setFocus()
ngAfterViewInit() { }

然后装饰器 function 将在找到的第一个输入字段之后搜索，如果找到，则将焦点设置到该元素：

export function setFocus(): MethodDecorator {
  return function (target: Object, key: string, descriptor: PropertyDescriptor) {
    descriptor.value = function (...args: any[]) {
      const ele = document.getElementsByTagName("INPUT")[0] as HTMLElement;
      if (ele) {
        ele.focus();
        return;
      }
    }
  }
}

堆栈闪电战

Answer 3

您可以使用 tabindex="1" 的 HTML 元素的 tabindex 属性将首先获得焦点

例如：

请参阅： https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex ： https://developer.paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/

注意：使用 tabindex 时要小心，因为它对与预期的 tab 顺序没有相似之处的内容强加了 tab 顺序。