Question

我的应用程序处于最后阶段，我们尚未对输入标签实现自动对焦。现在我们有一个要求，我们希望将重点放在每个页面的第一个输入标签上。我的应用程序中有很多页面/表单，因此在每个组件中使用ViewChild可能是一项繁琐的任务。因此，我正在寻找一种方法，可以在其中某个地方编写一些代码，并且该代码可以触发着眼于加载任何页面的第一个输入。有人可以建议一些方法吗？

Answer 1

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

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

Working demo

Answer 2

我想出了一个方法装饰器，可以完成您想要的。也就是说，如果您不介意将此功能导入所有页面。然后，您只需将此装饰器附加到AfterViewInit生命周期，就像这样：

@setFocus()
ngAfterViewInit() { }

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

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;
      }
    }
  }
}

STACKBLITZ

Answer 3

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

例如：

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

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

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

3 个答案: