如何在 mat-radio 内设置 mat-input 的焦点答案

【问题标题】：How can I set focus for mat-input inside the mat-radio如何在 mat-radio 内设置 mat-input 的焦点
【发布时间】：2020-01-10 08:21:46
【问题描述】：

我正在尝试在单击自定义单选按钮时将焦点（光标闪烁）设置在输入框上。但它没有发生。我有 stackblitz 演示 here。

到目前为止我已经尝试过了。

<mat-radio-group [(ngModel)]="selection" #radioGroup="matRadioGroup">
  <mat-radio-button value="option 1">option 1</mat-radio-button>
  <mat-radio-button value="option 2">option 2</mat-radio-button>
  <mat-radio-button value="option 3">option 3</mat-radio-button>
  <mat-radio-button value="option 4">option 4</mat-radio-button>
  <mat-radio-button [value]="customOption" (click)="onBlur()">
    <mat-form-field>
      <input matInput id="input" [(ngModel)]="customOption" />
    </mat-form-field>
  </mat-radio-button>
</mat-radio-group>

在组件中

onBlur() {
      document.getElementById('input').focus();
   }

【问题讨论】：

到目前为止您尝试过什么？请显示您认为应该可以工作的代码。
我已经用我的试用版更新了问题

标签： javascript html css angular7 mat-input

【解决方案1】：

问题是它在选择单选按钮的操作完成之前将焦点设置到输入元素，所以一旦完成，它会立即将焦点切换到单选按钮。

一个解决办法是改变

document.getElementById('input').focus();

到

setTimeout(() => document.getElementById('input').focus());

以便在将焦点设置到输入元素之前等待片刻。

【讨论】：