【问题标题】:Disable auto focus in dialog- modal in Angular 2/ material在Angular 2 /材料的对话框中禁用自动对焦
【发布时间】:2018-05-13 17:37:05
【问题描述】:

我正在使用来自 angular material-2 的对话框。

问题是:尤其是在 iPhone 或平板电脑中打开模态对话框时,我无法禁用自动对焦。在 iOS 中,它会自动聚焦对话框中的第一个输入字段!

我尝试使用标签索引并在其他输入字段中使用自动对焦,但它不起作用

我在我的代码中使用 Angular 2,在我的对话框中我使用的是表单控制。我尝试使用markasuntouchedafterviewInit,但我仍然有同样的问题!!

【问题讨论】:

    标签: angular modal-dialog angular-material2


    【解决方案1】:

    由于@angular/material@5.0.0-rc.1 MatDialogConfig 上有特殊选项autoFocus

    /** Whether the dialog should focus the first focusable element on open. */
    autoFocus?: boolean = true;
    

    所以你可以这样使用它:

    let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: { name: this.name, animal: this.animal },
      autoFocus: false   <============================== this line
    });
    

    Stackblitz Example

    【讨论】:

    【解决方案2】:

    我使用该解决方案在打开对话框时禁用自动对焦,并避免在最后选择的按钮上自动对焦。我发现它适用于 Angular Material 中的对话框和底部表单控件,请参阅代码:

    this.dialog.open(YourComponent, {
          data: inputData,
          width: '100%', 
          autoFocus: false, 
          restoreFocus: false
        });
    
    this.matBottomSheet.open(FilePickerComponent, {
          data: inputData,
          autoFocus: false,
          restoreFocus: false});
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2020-04-24
      • 2018-03-28
      • 1970-01-01
      • 1970-01-01
      • 2017-06-13
      • 2023-03-10
      • 2020-07-31
      相关资源
      最近更新 更多