如何在 bootstrap 模式中将焦点设置到 material 日期选择器？

Question

所以目前我的任务是确保我网站上的内容可以根据 WCAG 2.0 标准进行网络访问。此要求的要点之一是必须可以使用 Tab 键访问网页。也就是说，如果我想在表单中向前移动，我可以使用 Tab 键移动到下一个字段，然后使用 Shift Tab 键移回上一个字段。

现在我遇到的问题之一是让 material 日期选择器在日历出现时将焦点放在日历上。据我所知，焦点不会转到日历上，而是停留在模态形式内。那就是当我尝试在日期选择器打开时按 Tab 键时，它会循环显示模态表单而不是日历。我想要的是能够在日历中循环。

这是我用来设置日期选择器的内容。

<div class="col-md-6">
    <mat-form-field>
        <input matInput [matDatepicker]="picker" [min]="fromMinDate" [max]="curDate" readonly="readonly" (click)="openMinTaxCalendar(picker); trapEventFocus($event);"  #minEffectiveYear (ngModelChange)="setToDate($event)" placeholder="YYYY/MM/DD" [(ngModel)]="effectiveDateFrom">
        <mat-datepicker-toggle matSuffix [for]="picker1" (closed)="closedMinTaxCalendar($event)"></mat-datepicker-toggle>
        <mat-datepicker #picker ></mat-datepicker>
    </mat-form-field>
</div>

我尝试了各种方法，例如将 cdkFocusInitial 应用于

<input matInput ....> </input>

但这似乎没有任何作用。

我也试过应用 (focus)="picker.open" 但是这似乎会自动打开日历，同时没有设置适当的焦点。在我上面的代码片段中，trapEventFocus($event) 方法也未能触发。

如果有人有任何建议，我们将不胜感激。

Answer 1

我发现使用以下设置会产生良好的键盘效果并强制用户仅通过使用日期选择器select日期值。

<mat-form-field
  (click)="picker?.open()"
  style="cursor: pointer"
>
  <input
    matInput
    [ngModel]="dateField.value | date: 'yyyy/MM/dd'"
    [min]="fromMinDate"
    [max]="curDate"
    placeholder="YYYY/MM/DD"
    name="dateFieldView"
    style="cursor: pointer"
    (focus)="picker?.open()"
    readonly
  />
  <input
    matInput
    [matDatepicker]="picker"
    [ngModel]="effectiveDateFrom"
    name="dateField"
    #dateField
    required
    hidden
  />
  <mat-datepicker-toggle
    matSuffix
    [for]="picker"
  ></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

如何在 bootstrap 模式中将焦点设置到 material 日期选择器？

How to set focus to material date picker inside a bootstrap modal?

angular

bootstrap-modal

angular4-forms

Stackblitz