如何解决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 举报,一经查实,本站将立刻删除。