如何将焦点设置在支持 IOS 的设备上的输入上？

Question

我的目标是通过按钮单击方法将焦点设置在输入上。

我使用了模板变量，但通过组件代码执行似乎给出了相同的结果。

这在我测试的所有设备（MacBook 和一些移动设备）上都按预期工作，无论浏览器是什么，即 Safari、Chrome、Firefox，但它不适用于支持 iOS 的设备。什么也没发生。
这是代码片段，应该将焦点设置为单击按钮时的输入。

重要提示：它应该在 iPhone 或 iPad 上运行。

HTML

<input #input type="text">

<button type="button" (click)="input.focus()">Click to set focus on the input</button>

这里有一个针对该问题的小演示。

Answer 1

您可以使用以下内容：

@Component({
  selector: 'my-app',
  template: `
    <div *ngFor="let item of [1,2,3,4]; let i = index">
      <button type="button" (click)="display(i)">Click to show and set focus</button>
      <input #theInput *ngIf="show === i" type="text" >
    </div>
  `,
})
export class App {
  show = -1; 

  @ViewChild('theInput')
  private theInput;

  constructor() {
  }

  display(i) {
    this.show = i;
    setTimeout(() => this.theInput.nativeElement.focus(), 0);
  }
}

我不确定是否有比 setTimeout 的使用更优雅的东西，但是由于输入仅在由

show

的更改触发的更改检测之后添加到 DOM，所以

theInput

是未定义的（或当时显示的输入）。

演示：http://plnkr.co/edit/A0ZO0hyuR61nUdiSvzFj?p=preview

编辑：

事实证明还有更优雅的东西：AfterViewChecked：

export class App {
  show = -1; 
  shouldFocus = false;

  @ViewChild('theInput')
  private theInput;

  constructor() {
  }

  display(i) {
    this.show = i;
    this.shouldFocus = true;
  }

  ngAfterViewChecked() {
    if (this.shouldFocus) {
      this.theInput.nativeElement.focus();
      this.shouldFocus = false;
    }
  }
}

查看更新的演示：http://plnkr.co/edit/lXTRDGLKwkAAukEQGQjq?p=preview

Answer 2

“尝试在输入字段中使用自动对焦；它可能对您有帮助。”