Как я могу установить фокус на первое поле ввода на каждой странице всего моего приложения в угловых 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

Я придумал метод декоратор, который будет делать то, что вы хотите.То есть, если вы не против импортировать эту функцию на все страницы.Затем вы просто присоединяете этот декоратор к жизненному циклу 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

вы можете использовать свойство tabindex элемента HTML с 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, так как он налагает порядок табуляции на контент, который не похож на ожидаемый порядок табуляции.