如何在循环中的第一个输入元素上添加自动对焦？

Question

所以我正在循环并显示输入，我想点击 select 以将焦点添加到第一个输入元素上。任何建议我如何 select 第一个元素并给他添加自动对焦？

Answer 1

这是操作方法。写一个指令：

import {Directive, Renderer, ElementRef, OnInit, AfterViewInit, Input} from '@angular/core';

@Directive({
  moduleId: module.id,
  selector: '[focusOnInit]'
})
export class FocusOnInitDirective implements OnInit, AfterViewInit {
  @Input() focusOnInit ;

  static instances: FocusOnInitDirective[] = [];

  constructor(public renderer: Renderer, public elementRef: ElementRef) {
  }

  ngOnInit(): void {
    FocusOnInitDirective.instances.push(this)
  }

  ngAfterViewInit(): void {
    setTimeout(() => {
      FocusOnInitDirective.instances.splice(FocusOnInitDirective.instances.indexOf(this), 1);
    });

    if (FocusOnInitDirective.instances.every((i) =>  i.focusOnInit===0)) {
      this.renderer.invokeElementMethod(
        this.elementRef.nativeElement, 'focus', []);
    }
  }
}

在您的组件中：

import { Component } from '@angular/core';
@Component({
  moduleId: module.id,
  selector: 'app',
  template: `
    <div *ngFor="let input of [1,2,3,4]; let i=index">
      <input  type="text" [focusOnInit] = i >
    </div>
  `
})
export class AppComponent {

}

对应plunker, adapted from this

如何在循环中的第一个输入元素上添加自动对焦？

How to add autofocus on first input element in loop?

javascript

focus

typescript

angular