如何在 mat-radio 中为 mat-input 设置焦点
How can I set focus for mat-input inside the mat-radio
我正在尝试在单击自定义单选按钮时将焦点(光标闪烁)设置在输入框上。但它不是 happening.I 有 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();
}
问题是它在选择单选按钮的操作完成之前将焦点设置到输入元素,所以一旦完成,它立即将焦点切换到单选按钮。
一个解决方案是改变
document.getElementById('input').focus();
至
setTimeout(() => document.getElementById('input').focus());
以便在将焦点设置到输入元素之前等待片刻。
我正在尝试在单击自定义单选按钮时将焦点(光标闪烁)设置在输入框上。但它不是 happening.I 有 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();
}
问题是它在选择单选按钮的操作完成之前将焦点设置到输入元素,所以一旦完成,它立即将焦点切换到单选按钮。
一个解决方案是改变
document.getElementById('input').focus();
至
setTimeout(() => document.getElementById('input').focus());
以便在将焦点设置到输入元素之前等待片刻。