如何管理 Angular 2 自定义输入组件的焦点状态？

Question

我找不到通过 Angular 2 管理自定义输入如何从label （及其for属性）获得焦点以及如何管理这些状态的方法。

我试图给我与普通人相同的聚焦和模糊行为。 对此有何想法？

谢谢！

Answer 1

HTML 有 tabindex 属性，这使得任何元素都可以聚焦。 http://w3c.github.io/html/editing.html#the-tabindex-attribute

然后在组件中你可以监听焦点事件：

 @HostBinding('tabindex') tabindex = 0;

 @HostListener('focus')
 focusHandler() {
   alert('focused!');
 }

Answer 2

考虑到可访问性，每个输入都必须包含一个标签，因此输入组件应该包含输入和标签标签

imports...

@Component({
      selector: 'app-input',
      templateUrl: 
          `<label [for]="id">
              <div class="label">{{label}}</div>
              <input [id]="id"
                     [type]="type"
                     [attr.maxlength]="maxlength"
                     [autocomplete]="autocomplete"
                     [placeholder]="placeholder"
                     (input)="onInput($event)"
                     (focus)="onFocus()"
                     required
                 >
          </label>`,
      styleUrls: ['./input.component.scss'],
})

export class InputComponent{

  @Input() label: string;
  @Input() id: string;
  @Input() type: string;
  @Input() maxlength: string;
  @Input() autocomplete = "on";
  @Input() disabled = null;

  onInput(event: any){
      ....
  }

  onFocus(){
      ....
  }
}