angular-material - 默认情况下,如何在 Angular Material 中的菜单图标对话框按钮上自动对焦?
问题描述
我在菜单图标下有两个菜单项删除和创建。我正在从菜单图标中选择任何操作,这会打开带有两个按钮Delete和Cancel的确认对话框。
从菜单中选择任何菜单项后,最初焦点停留在菜单图标上。我想默认将焦点转移到对话框按钮上,以便在Enter-Key hit 时,它会在执行所需的操作后关闭对话框。请在此处查看演示Stackblitz
解决方案
我修复了这个问题,因为每当我尝试单击“从菜单中删除”时,Spinner 都会阻止焦点移动到对话框按钮中。我id="deletebutton"
在html中添加如下。
<div *ngIf="!loadspinner">
<mat-dialog-content>
<p>Are you sure to delete this?</p>
</mat-dialog-content>
<mat-dialog-actions align="center">
<button id="deletebutton" mat-raised-button color="primary" (click)="deleteDocument()">Delete</button>
<button mat-raised-button mat-dialog-close tabindex="-1" (click)="close()" style="border-color:#3f51b5;">Cancel</button>
</mat-dialog-actions>
</div>
并在 .ts 文件中的 ngOnInit 方法中添加超时,如下所示。
ngOnInit() {
this.service.validate(this.data).subscribe(value => {
this.loadspinner = false;
if (value != null) {
this.warningMsg = value.statusMessage;
} else {
this.warningMsg = "";
}
//For autoFocus in dialog button as Spinner prevents it to set by deafault
setTimeout(()=>{
document.getElementById('deletebutton').focus();
});
});
}
推荐阅读
- gunicorn - Airflow 的 Gunicorn 正在发送错误日志
- nosql - 使用 N1QL 从 Couchbase 中删除所有内容为空的文档
- c# - Azure Bot Framework Emulator 错误 - System.ArgumentNullException:值不能为空
- swift - 有没有办法模拟视图?
- python - 如何将变量从 Django 传递给 Scrapy?
- java - HttpServlet error in eclipse
- javascript - 根据其他选定的框选项选择框值 - MySQL、JS、HTML
- neo4j - Neo4j - 删除节点
- infinispan - 将现有的 Jgroups 通道注入 Infinispan 配置
- java - 检查记录是否存在 mongodb 异步驱动程序 java