时间戳

首页 > 解决方案 > 如何在引导模式中将焦点设置为材料日期选择器？

angular - 如何在引导模式中将焦点设置为材料日期选择器？

问题描述

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

现在我遇到的问题之一是让材料日期选择器在日历出现时关注它。据我所知，焦点不会转到日历，而是停留在模态表单中。那就是当我在日期选择器打开时尝试按 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) 方法也无法触发。

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

标签： angularbootstrap-modalangular4-forms

解决方案

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

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

堆栈闪电战

推荐阅读