在（单击）和（焦点）事件上打开 Mat 对话框

Posted 2023-03-13

【中文标题】在（单击）和（焦点）事件上打开 Mat 对话框

【英文标题】：open Mat-dialog on (click) and (focus) events

【发布时间】：2020-03-30 22:39:55

【问题描述】：

我有一个打开 Mat 对话框的表单字段，我希望它在鼠标单击或键盘（按下选项卡按钮）时打开，我尝试使用 (click) 和 (focus) 事件，但输入有时会一直打开关闭后。

<input #loc formControlName="loc" (click)="openDialog()" (focus)="openDialog()" placeholder="Enter you location" matInput required  [readonly]="true"/>

openDialog(): void 
    this.locInput.focused = !this.locaInput.focused;
    if (this.locInput.focused) 
    const dialogRef = this.dialog.open(locDialogComponent, 
      width: '524px',
      data: 
        location: this.location;
      
    );

    dialogRef.afterClosed().subscribe(result => 
    );

【问题讨论】：

将您的代码添加到问题中。

@HDJEMAI 现已添加。

你想要一个明确的 Tab 对吗？不是一般的焦点？

@christian 是的，不是一般的

【参考方案1】：

如果您希望它在按下 Tab 按钮时触发，同时已经聚焦输入，您可以简单地通过

<input (keydown.Tab)="openDialog()" />