javascript - 在 Angular 2 中单击按钮时如何将焦点设置到 div？

Question

我想在单击按钮时将焦点设置到页面顶部的 div。意思是在点击按钮的时候进行验证，如果验证失败，需要聚焦到页面顶部，验证错误显示的地方。

那么如何获取页面顶部div的焦点。表单位于 modal-dialog 中。

Answer 1

If you want to make a non-focusable element focusable, you must add a tabindex attribute to it and div falls in that category .

更多关于 tabIndex

使用这样的东西

<div tabindex="1"></div>

甚至为相同的指令制定指令，这将帮助您自定义功能

import { Directive, Input, ElementRef, Inject, OnChanges } from '@angular/core';

@Directive({ selector: '[focusField]' })
export class FocusDirective implements OnChanges {

  @Input('focusField') focusField: any;
  constructor(@Inject(ElementRef) private element: ElementRef) { }

  ngOnChanges(changes){
    if(changes.focusField.currentValue){
      this.element.nativeElement.focus();
    }
  }
}