diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 9a6cdf4..a35aebd 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -3,11 +3,12 @@ import {RouterOutlet} from '@angular/router'; import {FooterComponent} from "@component/common/footer/footer.component"; import localeRu from '@angular/common/locales/ru'; import { registerLocaleData } from '@angular/common'; +import {FocusNextDirective} from "@/directives/focus-next.directive"; @Component({ selector: 'app-root', standalone: true, - imports: [RouterOutlet, FooterComponent], + imports: [RouterOutlet, FooterComponent, FocusNextDirective], template: ` ` diff --git a/src/directives/focus-next.directive.ts b/src/directives/focus-next.directive.ts new file mode 100644 index 0000000..a01ee0c --- /dev/null +++ b/src/directives/focus-next.directive.ts @@ -0,0 +1,28 @@ +import {Directive, HostListener, Input} from '@angular/core'; + +@Directive({ + selector: '[focusNext]', + standalone: true +}) +export class FocusNextDirective { + @Input('focusNext') nextElementSelector!: string; + + @HostListener('keydown.enter', ['$event']) + handleEnter(event: KeyboardEvent) { + event.preventDefault(); + const nextElement = document.getElementById(this.nextElementSelector) as HTMLElement; + if (nextElement) { + nextElement.focus(); + + if (this.isClickable(nextElement)) { + nextElement.click(); + } + } + } + + private isClickable(element: HTMLElement): boolean { + const clickableTags = ['BUTTON', 'A', 'INPUT']; + const hasTabIndex = element.hasAttribute('tabindex'); + return clickableTags.includes(element.tagName) || hasTabIndex; + } +}