默认情况下，如何在 Angular Material 中的菜单图标的对话框按钮上自动对焦? [英] How to autofocus by default on dialog button from Menu Icon in Angular Material?

问题描述

我在菜单图标下有两个菜单项删除和创建.我正在从菜单图标中选择任何操作，这会打开带有两个按钮删除和取消的确认对话框.

从菜单中选择任何菜单项后，最初焦点停留在菜单图标上.我想默认移动 焦点在对话框按钮，以便在 Enter-Key 点击时，它在执行所需操作后关闭对话框.请在此处查看演示 Stackblitz

解决方案

我解决了这个问题，因为每当我尝试单击从菜单中删除"时，Spinner 都会阻止焦点移到对话框按钮上.我在 html 中添加了 id="deletebutton"，如下所示.

<mat-dialog-content><p>您确定要删除它吗?</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";(点击)=关闭()"style="border-color:#3f51b5;">Cancel</button></mat-dialog-actions>

并在 .ts 文件中的 ngOnInit 方法中添加了 timeout，如下所示.

ngOnInit() {this.service.validate(this.data).subscribe(value => {this.loadspinner = false;如果(值！= null){this.warningMsg = value.statusMessage;} 别的 {this.warningMsg = "";}//对于对话框按钮中的自动对焦，因为 Spinner 阻止它默认设置setTimeout(()=>{document.getElementById('deletebutton').focus();});});}

I have two menu items Delete and Create under Menu Icon. I am selecting any operation from Menu Icon which opens confirmation dialog with two button Delete and Cancel.

Initially focus stays on menu icon after selecting any menu item from menu. I want to shift the focus on dialog button by default so that on Enter-Key hit , it close the dialog after performing desired operation. Please check Demo here Stackblitz

解决方案

I fixed this issue as Spinner was preventing focus to move into dialog button whenever i was trying to click on Delete from Menu. I added id="deletebutton" in html as below.

<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>

And added timeout in ngOnInit method in .ts file as below.

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();
          }); 
      });
  }

这篇关于默认情况下，如何在 Angular Material 中的菜单图标的对话框按钮上自动对焦?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！