HTML 5 日期选择器通过键盘输入键通过图标打开日历

问题描述

Date Picker 日历需要使用 Enter 键通过键盘打开
在当前单击通过日历图标，日历打开。但不是通过键盘...

在 Firefox 中，HTML 5 日期选择器图标本身不存在。所以用很棒的字体替换了日历图标。所以这适用于交叉兼容的浏览器

到达日期选择器图标后，每个可点击元素都应该可以通过键盘键访问

---

Example on StackBlitz

<div class="cal-wrp">
  <div class="btnCal-wrp" (keyup.enter)="openCalender($event)">
    <input class="btnCal-click" type="date" aria-labelledby="Start Date" id="startDate" name="stdate" 
     title="Start Date"  required />
  </div>
  <button type="button" class="btnCal" aria-label="Start Date Picker" (keyup.enter)="openCalender($event)">
     <span class="fa fa-calendar" id="faIconId" (keyup.enter)="openCalender($event)"></span>
  </button>
</div>

---

openCalender(e) {
    const calenderView = <HTMLElement>document.getElementById("startDate");
    console.log(e);
    calenderView.click();
}

将 (keyup.enter)="openCalender($event)" 与 document.getElementById("startDate").click() 相关联 No Good 结果还是一样

---

或者经过研究，找到了一些在 HTML 5 和普通 JS 中的解决方案。但是找不到将所有 JS 函数迁移到 TypeScript 的方法

Check Here on JSFiddle

为了支持并使其完全符合 ADA 标准。我们应该如何完成？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）