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(){
      ....
  }
}

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

2 个答案: