动态设置焦点在垫子按钮上不起作用
Setting focus on mat button dynamically not working
在我的应用程序中,我有一个输入字段,用户可以在其中输入城市代码,并且将调用 focus out 服务以获取城市详细信息,搜索按钮将被启用并获得焦点。当用户输入城市代码并跳出时,一切都按预期进行,但焦点未设置为“搜索”按钮。我知道禁用的按钮不会收到焦点事件,但只有在启用按钮后才设置焦点,但它似乎仍然不起作用。
Ts
export class InputErrorsExample {
city = new FormControl('');
search: boolean = false;
fetchCityDetails() {
setTimeout(() => {
// calling service to fetch details
this.search = true;
let btn = document.getElementById('search');
if (btn) btn.focus();
}, 1000);
}
}
HTML
<form class="example-form">
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>City</mat-label>
<input type="text" matInput [formControl]="city" (focusout)="fetchCityDetails()">
</mat-form-field>
<button tabindex="0" id="search" mat-raised-button color="primary" [disabled] = "!search">Search</button>
</form>
这是 stackblitz https://stackblitz.com/edit/angular-ymkvhp?file=src%2Fapp%2Finput-errors-example.html 的 link。
尝试用另一个 setTimeout 延迟按钮的焦点
fetchCityDetails() {
setTimeout(() => {
// calling service to fetch details
this.search = true;
setTimeout(()=>{
let btn = document.getElementById('search');
if (btn) btn.focus();
})
}, 1000);
}
在我的应用程序中,我有一个输入字段,用户可以在其中输入城市代码,并且将调用 focus out 服务以获取城市详细信息,搜索按钮将被启用并获得焦点。当用户输入城市代码并跳出时,一切都按预期进行,但焦点未设置为“搜索”按钮。我知道禁用的按钮不会收到焦点事件,但只有在启用按钮后才设置焦点,但它似乎仍然不起作用。
Ts
export class InputErrorsExample {
city = new FormControl('');
search: boolean = false;
fetchCityDetails() {
setTimeout(() => {
// calling service to fetch details
this.search = true;
let btn = document.getElementById('search');
if (btn) btn.focus();
}, 1000);
}
}
HTML
<form class="example-form">
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>City</mat-label>
<input type="text" matInput [formControl]="city" (focusout)="fetchCityDetails()">
</mat-form-field>
<button tabindex="0" id="search" mat-raised-button color="primary" [disabled] = "!search">Search</button>
</form>
这是 stackblitz https://stackblitz.com/edit/angular-ymkvhp?file=src%2Fapp%2Finput-errors-example.html 的 link。
尝试用另一个 setTimeout 延迟按钮的焦点
fetchCityDetails() {
setTimeout(() => {
// calling service to fetch details
this.search = true;
setTimeout(()=>{
let btn = document.getElementById('search');
if (btn) btn.focus();
})
}, 1000);
}