如何在 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 順序。